:root {
    color-scheme: light;
    --dr-font-family: "Baloo 2", "Arial Rounded MT Bold", system-ui, sans-serif;
    --dr-screen-title-size: clamp(16px, 1.42vw, 30px);
    --dr-screen-caption-size: clamp(8px, 0.66vw, 14px);
    --dr-title-weight: 800;
    --dr-gold: #f7c75f;
    --dr-deep-gold: #a95a13;
    --dr-ink: #4b250a;
    --dr-cyan: #45d9f6;
    --dr-panel: rgba(255, 248, 226, 0.92);
    --dr-shadow: 0 18px 55px rgba(71, 35, 5, 0.28);
}

* {
    box-sizing: border-box;
}

.dragon-race-page {
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: hidden;
}

.dragon-race-page,
.dr-app {
    font-family: var(--dr-font-family);
}

.dr-app button,
.dr-app input,
.dr-app select,
.dr-app textarea {
    font-family: inherit;
}

.dr-app h1,
.dr-app h2,
.dr-app h3 {
    font-family: var(--dr-font-family);
    font-weight: var(--dr-title-weight);
}

.dr-app button {
    -webkit-tap-highlight-color: transparent;
}

.dr-stage [hidden] {
    display: none !important;
}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.dragon-race-page {
    background: #07172c;
    color: var(--dr-ink);
}

.dr-app,
.dr-stage {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}

.dr-stage {
    left: 50%;
    top: 50%;
    width: max(100vw, 200dvh);
    height: max(100dvh, 50vw);
    transform: translate(-50%, -50%);
    aspect-ratio: 2 / 1;
    isolation: isolate;
    background: #58bdf5;
}

.dr-scene {
    position: absolute;
    inset: 0;
    display: none;
    overflow: hidden;
    opacity: 0;
    transform: scale(1.015);
    transition: opacity 350ms ease, transform 450ms ease;
}

.dr-scene.is-active {
    display: block;
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.dr-scene.is-leaving {
    display: block;
    opacity: 0;
}

.dr-scene__background {
    position: absolute;
    inset: 0;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform: translateZ(0);
}

.dr-scene__background--lobby {
    background-image: url("../shared/img/assets_taks/dragon-race/lobby-bg.webp");
}

.dr-scene__background--seal-hall {
    background-image: url("../shared/img/assets_taks/dragon-race/lobby-seal-hall-bg.webp");
}

.dr-scene__background--track {
    background-image: url("../shared/img/assets_taks/dragon-race/track-bg.webp");
}

.dr-scene__background--result {
    background-image: url("../shared/img/assets_taks/dragon-race/result-bg.webp");
}

.dr-scene__background--result-ceremony {
    background-image: url("../shared/img/assets_taks/dragon-race/result-ceremony-bg.webp");
}

.dr-scrim {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 55%, rgba(255, 255, 255, 0.08), rgba(17, 72, 131, 0.25)),
        linear-gradient(180deg, rgba(18, 111, 191, 0.05), rgba(16, 62, 103, 0.24));
    backdrop-filter: blur(2px);
}

.dr-gate-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(42%, 760px);
    min-height: 32%;
    padding: 3.4% 4%;
    transform: translate(-50%, -45%);
    text-align: center;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.97), rgba(255, 243, 206, 0.94));
    border: clamp(2px, 0.22vw, 5px) solid rgba(255, 210, 102, 0.95);
    border-radius: clamp(24px, 2vw, 44px);
    box-shadow:
        0 0 0 clamp(4px, 0.4vw, 9px) rgba(139, 82, 12, 0.28),
        var(--dr-shadow);
}

.dr-gate-card h1 {
    margin: 0.2em 0 0.15em;
    color: #7b3d0c;
    font-size: clamp(24px, 2.6vw, 54px);
    line-height: 1.02;
}

.dr-gate-card.is-loading {
    width: min(36%, 640px);
    min-height: 0;
    padding: 2.6% 3%;
}

.dr-gate-card.is-loading .dr-loader {
    margin-bottom: 0.8em;
}

.dr-gate-card.is-loading h1 {
    margin: 0;
}

.dr-gate-card p:last-child {
    margin: 0;
    color: #855928;
    font-size: clamp(13px, 1.15vw, 24px);
    font-weight: 700;
}

.dr-gate-card .dr-primary-button,
.dr-gate-card .dr-secondary-button {
    margin: 1em 0.35em 0;
}

.dr-loader {
    width: clamp(46px, 4vw, 78px);
    height: clamp(46px, 4vw, 78px);
    margin: 0 auto 1.2em;
    border: clamp(5px, 0.45vw, 9px) solid rgba(56, 188, 237, 0.23);
    border-top-color: #e8a629;
    border-radius: 50%;
    animation: dr-spin 850ms linear infinite;
}

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

.dr-eyebrow {
    margin: 0;
    color: #a55c0d;
    font-size: clamp(11px, 0.92vw, 19px);
    font-weight: 800;
    letter-spacing: 0.16em;
}

.dr-scene-header {
    position: absolute;
    left: 50%;
    top: 5.2%;
    z-index: 6;
    width: min(60%, 1060px);
    padding: 1.05% 7% 1.2%;
    transform: translateX(-50%);
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 238, 190, 0.93));
    border: clamp(2px, 0.18vw, 4px) solid #edb84e;
    border-radius: 999px;
    box-shadow: 0 8px 0 rgba(142, 76, 10, 0.36), 0 17px 32px rgba(52, 91, 119, 0.26);
}

.dr-scene-header h1 {
    margin: 0;
    color: #72380c;
    font-size: clamp(22px, 2.3vw, 48px);
    line-height: 1.05;
    text-shadow: 0 2px 0 white;
}

.dr-scene-header--compact {
    top: 3.7%;
    width: min(52%, 920px);
}

.dr-scene-header--dragon-selection {
    top: 2.4%;
    width: min(54%, 960px);
    padding: 0.92% 7.2% 1%;
    background:
        radial-gradient(circle at 50% -55%, rgba(120, 226, 255, 0.5), transparent 62%),
        linear-gradient(180deg, rgba(36, 108, 161, 0.98), rgba(16, 57, 111, 0.98));
    border-color: #f4ce67;
    border-radius: clamp(14px, 1.2vw, 25px);
    box-shadow:
        0 5px 0 rgba(93, 48, 8, 0.64),
        0 0 0 clamp(2px, 0.17vw, 4px) rgba(255, 245, 190, 0.32),
        0 12px 26px rgba(13, 56, 96, 0.28),
        0 0 25px rgba(76, 208, 255, 0.22);
    clip-path: polygon(5% 0, 95% 0, 100% 50%, 95% 100%, 5% 100%, 0 50%);
}

.dr-scene-header--dragon-selection::before,
.dr-scene-header--dragon-selection::after {
    content: "✦";
    position: absolute;
    top: 50%;
    color: #ffe88e;
    font-size: clamp(17px, 1.6vw, 32px);
    text-shadow: 0 2px 0 #8c4d0c, 0 0 12px rgba(255, 226, 111, 0.9);
    transform: translateY(-50%);
}

.dr-scene-header--dragon-selection::before { left: 4.2%; }
.dr-scene-header--dragon-selection::after { right: 4.2%; }

.dr-scene-header--dragon-selection h1 {
    color: #fff6cf;
    font-size: var(--dr-screen-title-size);
    font-weight: var(--dr-title-weight);
    letter-spacing: 0.055em;
    text-shadow: 0 3px 0 #522a08, 0 0 12px rgba(115, 225, 255, 0.38);
}

.dr-timer--selection circle {
    fill: rgba(7, 45, 93, 0.9);
}

.dr-timer--selection strong {
    color: #fff0a0;
}

.dr-timer {
    position: absolute;
    right: 2.1%;
    top: 50%;
    width: clamp(46px, 4.3vw, 82px);
    aspect-ratio: 1;
    transform: translateY(-50%);
}

.dr-timer svg {
    display: block;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.dr-timer circle {
    fill: rgba(255, 255, 255, 0.82);
    stroke-width: 4;
}

.dr-timer__track {
    stroke: rgba(177, 112, 24, 0.18);
}

.dr-timer__ring {
    stroke: #f3a61b;
    stroke-linecap: round;
    stroke-dasharray: 113.1;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 250ms linear;
}

.dr-timer strong {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #7a3c0b;
    font-size: clamp(16px, 1.5vw, 29px);
    font-weight: 800;
}

.dr-lobby-seal-label,
.dr-lobby-status {
    position: absolute;
    left: 50%;
    z-index: 9;
    transform: translateX(-50%);
    color: #fff4bd;
    font-family: var(--dr-font-family);
    font-weight: var(--dr-title-weight);
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    background:
        radial-gradient(circle at 50% 0, rgba(105, 221, 255, 0.24), transparent 68%),
        linear-gradient(180deg, rgba(29, 105, 163, 0.98), rgba(8, 52, 106, 0.98));
    border: clamp(1px, 0.13vw, 3px) solid #f4cc61;
    box-shadow:
        0 4px 0 rgba(88, 48, 8, 0.72),
        0 0 18px rgba(78, 216, 255, 0.36);
    clip-path: polygon(6% 0, 94% 0, 100% 50%, 94% 100%, 6% 100%, 0 50%);
}

.dr-lobby-seal-label {
    top: 4.5%;
    min-width: 17%;
    padding: 0.64% 2.4% 0.72%;
    font-size: var(--dr-screen-title-size);
    letter-spacing: 0.055em;
}

.dr-lobby-status {
    top: 11.2%;
    min-width: 24%;
    padding: 0.48% 2.2% 0.58%;
    color: #dff9ff;
    font-size: var(--dr-screen-caption-size);
    letter-spacing: 0.055em;
}

.dr-timer--lobby {
    right: 7.2%;
    top: 4.8%;
    z-index: 10;
    width: clamp(54px, 4.8vw, 88px);
    transform: none;
    border-radius: 50%;
    filter: drop-shadow(0 5px 0 rgba(79, 43, 8, 0.46)) drop-shadow(0 0 14px rgba(91, 224, 255, 0.44));
}

.dr-timer--lobby circle {
    fill: rgba(8, 48, 99, 0.94);
}

.dr-timer--lobby .dr-timer__track {
    stroke: rgba(255, 244, 191, 0.28);
}

.dr-timer--lobby strong {
    color: #fff0a3;
    text-shadow: 0 2px 0 #633407;
}

.dr-timer--selection {
    right: 7.2%;
    top: 4.5%;
    z-index: 10;
    width: clamp(54px, 4.8vw, 88px);
    transform: none;
    border-radius: 50%;
    filter: drop-shadow(0 5px 0 rgba(79, 43, 8, 0.46)) drop-shadow(0 0 14px rgba(91, 224, 255, 0.44));
}

.dr-timer--selection .dr-timer__track {
    stroke: rgba(255, 244, 191, 0.28);
}

.dr-timer--selection strong {
    text-shadow: 0 2px 0 #633407;
}

.dr-lobby-portals {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.dr-portal-racer {
    position: absolute;
    left: var(--portal-x);
    top: var(--portal-y);
    width: 8.8%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    scale: var(--portal-scale, 1);
    filter: drop-shadow(0 10px 9px rgba(58, 39, 18, 0.34));
    isolation: isolate;
}

.dr-portal-racer::before {
    content: "";
    position: absolute;
    inset: -18%;
    z-index: -1;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(235, 254, 255, 0.72), rgba(73, 215, 255, 0.2) 46%, transparent 70%),
        conic-gradient(from 0deg, transparent, rgba(87, 224, 255, 0.88), rgba(255, 217, 97, 0.92), transparent 72%);
    filter: blur(4px);
    opacity: 0.4;
    animation: dr-avatar-orbit 5s linear infinite;
}

.dr-portal-racer.is-joined {
    opacity: 1;
}

.dr-portal-racer__avatar-shell {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 5%;
    overflow: visible;
    background:
        radial-gradient(circle at 50% 42%, rgba(220, 248, 255, 0.95), rgba(93, 203, 242, 0.82)),
        #89dff7;
    border: clamp(3px, 0.22vw, 5px) solid rgba(238, 253, 255, 0.98);
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 clamp(2px, 0.16vw, 4px) rgba(30, 121, 183, 0.62),
        0 0 0 clamp(2px, 0.22vw, 5px) rgba(90, 228, 255, 0.32),
        0 0 24px rgba(67, 220, 248, 0.7);
    animation: dr-lobby-avatar-idle 3.6s ease-in-out var(--float-delay, 0s) infinite;
}

.dr-portal-racer__avatar-shell .frame-component {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
}

.dr-portal-racer__avatar-shell .frame-overlay {
    overflow: visible !important;
}

.dr-portal-racer__avatar-shell .frame-overlay img {
    object-fit: contain !important;
}

.dr-portal-racer__avatar-shell.has-avatar-frame {
    border-color: rgba(255, 249, 211, 0.78);
    box-shadow:
        inset 0 0 0 clamp(1px, 0.12vw, 3px) rgba(32, 130, 185, 0.52),
        0 0 22px rgba(77, 220, 248, 0.62);
}

.dr-portal-racer.is-child .dr-portal-racer__avatar-shell {
    background:
        radial-gradient(circle at 50% 42%, #fffef1, #f8d980 72%),
        #ffe78e;
    border-color: #fff8c9;
    box-shadow:
        inset 0 0 0 clamp(2px, 0.18vw, 4px) rgba(151, 82, 7, 0.68),
        0 0 0 clamp(3px, 0.28vw, 6px) rgba(255, 204, 55, 0.42),
        0 0 28px rgba(255, 220, 86, 0.96);
}

.dr-portal-racer__avatar {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #d9f4ff;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.58);
    transition: opacity 280ms ease, transform 520ms cubic-bezier(.16, 1.25, .3, 1);
}

.dr-portal-racer.is-joined .dr-portal-racer__avatar {
    opacity: 1;
    transform: scale(1);
}

.dr-portal-racer.is-joined
    .dr-portal-racer__avatar-shell.has-avatar-frame
    .frame-avatar {
    transform: scale(1.05);
}

.dr-portal-racer__summon {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    color: rgba(34, 111, 157, 0.88);
    font-size: clamp(28px, 2.75vw, 54px);
    font-weight: 1000;
    -webkit-text-stroke: 1px rgba(235, 253, 255, 0.86);
    text-shadow:
        0 2px 0 rgba(255, 255, 255, 0.82),
        0 0 12px rgba(71, 211, 255, 0.94);
    opacity: 1;
    animation: dr-lobby-summon-mark 1.6s ease-in-out infinite;
}

.dr-portal-racer.is-joined .dr-portal-racer__summon {
    opacity: 0;
    visibility: hidden;
    animation: none;
}

.dr-portal-racer__arrival {
    position: absolute;
    left: 50%;
    bottom: -35%;
    z-index: 1;
    width: 185%;
    height: 260%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(105, 231, 255, 0.12), rgba(229, 253, 255, 0.96) 45%, transparent 91%);
    clip-path: polygon(32% 100%, 68% 100%, 100% 0, 0 0);
    filter: blur(5px);
    opacity: 0;
    pointer-events: none;
}

.dr-portal-racer.is-arriving {
    animation: dr-lobby-racer-arrive 900ms cubic-bezier(.16, 1.2, .3, 1) both;
}

.dr-portal-racer.is-arriving .dr-portal-racer__arrival {
    animation: dr-lobby-arrival-beam 980ms ease-out both;
}

.dr-portal-racer.is-child.is-arriving {
    animation-duration: 1250ms;
    animation-delay: 260ms;
}

.dr-portal-racer.is-child.is-arriving .dr-portal-racer__arrival {
    animation-duration: 1280ms;
    animation-delay: 180ms;
}

.dr-portal-racer.is-child.is-arriving::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 86%;
    z-index: 0;
    width: 190%;
    aspect-ratio: 2.7;
    transform: translate(-50%, -50%) scale(0.2);
    border: clamp(2px, 0.18vw, 4px) solid rgba(255, 230, 105, 0.94);
    border-radius: 50%;
    box-shadow:
        0 0 18px rgba(255, 222, 82, 0.95),
        inset 0 0 18px rgba(95, 227, 255, 0.72);
    opacity: 0;
    animation: dr-lobby-child-entry-ripple 1250ms 320ms ease-out both;
    pointer-events: none;
}

.dr-portal-racer__name {
    position: absolute;
    left: 50%;
    top: 105%;
    z-index: 4;
    min-width: 108%;
    max-width: 160%;
    padding: 3.2% 10% 3.6%;
    transform: translateX(-50%);
    color: #60310a;
    font-size: clamp(9px, 0.72vw, 15px);
    font-weight: 900;
    text-align: center;
    white-space: nowrap;
    background: rgba(255, 252, 229, 0.96);
    border: clamp(1px, 0.1vw, 2px) solid rgba(231, 172, 59, 0.96);
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(121, 66, 12, 0.24), 0 7px 14px rgba(45, 70, 91, 0.18);
}

.dr-portal-racer.is-summoning .dr-portal-racer__name {
    color: #4f7890;
    background: rgba(230, 249, 255, 0.86);
    border-color: rgba(117, 211, 239, 0.8);
}

.dr-portal-racer__status {
    position: absolute;
    left: 50%;
    top: 134%;
    z-index: 5;
    padding: 2.5% 9%;
    transform: translateX(-50%);
    color: #eefdff;
    font-size: clamp(7px, 0.5vw, 10px);
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(63, 160, 211, 0.96), rgba(37, 91, 153, 0.96));
    border: 1px solid rgba(210, 247, 255, 0.92);
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(20, 63, 105, 0.34);
}

.dr-portal-racer.is-child:not(.is-lobby-ready) .dr-portal-racer__status {
    color: #673609;
    background: linear-gradient(180deg, #fff5a5, #f6bd32);
    border-color: #fff8cf;
    box-shadow: 0 2px 0 rgba(119, 65, 7, 0.34), 0 0 12px rgba(255, 222, 76, 0.55);
}

.dr-portal-racer.is-lobby-ready .dr-portal-racer__status {
    color: #f7ffde;
    background: linear-gradient(180deg, rgba(40, 176, 110, 0.96), rgba(17, 117, 79, 0.96));
    border-color: rgba(221, 255, 205, 0.92);
    box-shadow: 0 2px 0 rgba(16, 78, 53, 0.34);
}

.dr-portal-racer.is-summoning .dr-portal-racer__status {
    color: #e8faff;
    background: linear-gradient(180deg, rgba(70, 151, 194, 0.88), rgba(44, 99, 148, 0.9));
    border-color: rgba(205, 245, 255, 0.82);
}

.dr-portal-racer[data-lobby-slot="1"] .dr-portal-racer__name,
.dr-portal-racer[data-lobby-slot="1"] .dr-portal-racer__status {
    left: auto;
    right: 150%;
    transform: none;
}

.dr-portal-racer[data-lobby-slot="1"] .dr-portal-racer__name {
    top: 25%;
}

.dr-portal-racer[data-lobby-slot="1"] .dr-portal-racer__status {
    top: 66%;
}

.dr-portal-racer[data-lobby-slot="4"] .dr-portal-racer__name,
.dr-portal-racer[data-lobby-slot="4"] .dr-portal-racer__status {
    left: 150%;
    transform: none;
}

.dr-portal-racer[data-lobby-slot="4"] .dr-portal-racer__name {
    top: 25%;
}

.dr-portal-racer[data-lobby-slot="4"] .dr-portal-racer__status {
    top: 66%;
}

.dr-portal-racer.is-summoning {
    opacity: 0.72;
    filter: grayscale(0.18) drop-shadow(0 8px 8px rgba(38, 80, 107, 0.24));
}

.dr-portal-racer.is-summoning::before {
    opacity: 0.7;
}

@keyframes dr-avatar-orbit {
    to { transform: rotate(360deg); }
}

@keyframes dr-lobby-avatar-idle {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -3%; }
}

@keyframes dr-lobby-summon-mark {
    0%, 100% { opacity: 0.48; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes dr-lobby-racer-arrive {
    0% { opacity: 0; translate: 0 20%; scale: 0.38; filter: brightness(2.2) blur(4px); }
    52% { opacity: 1; translate: 0 -4%; scale: var(--portal-scale, 1); filter: brightness(1.5) blur(0); }
    100% { opacity: 1; translate: 0 0; scale: var(--portal-scale, 1); filter: brightness(1) drop-shadow(0 10px 9px rgba(58, 39, 18, 0.34)); }
}

@keyframes dr-lobby-arrival-beam {
    0% { opacity: 0; transform: translateX(-50%) scaleY(0.35); }
    18%, 62% { opacity: 0.92; transform: translateX(-50%) scaleY(1); }
    100% { opacity: 0; transform: translateX(-50%) scaleY(1.08); }
}

@keyframes dr-lobby-child-entry-ripple {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.18); }
    24% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

.dr-lobby-convergence {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.dr-lobby-convergence path {
    fill: none;
    stroke: rgba(114, 232, 255, 0.94);
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-dasharray: 8 14;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(97, 225, 255, 0.92));
    transition: opacity 500ms ease, stroke-width 500ms ease;
}

.dr-lobby-convergence path.is-active {
    opacity: 0.62;
    animation: dr-lobby-energy-flow 1.25s linear infinite;
}

#dr-lobby.is-roster-ready .dr-lobby-convergence path.is-active {
    stroke-width: 3.4;
    opacity: 0.96;
    filter: drop-shadow(0 0 7px #bcf7ff) drop-shadow(0 0 13px rgba(255, 220, 93, 0.72));
}

.dr-lobby-seal {
    position: absolute;
    left: 50%;
    top: 30%;
    z-index: 5;
    display: grid;
    width: 14.2%;
    aspect-ratio: 1;
    margin: 0;
    padding: 0;
    place-items: center;
    transform: translate(-50%, -50%);
    color: inherit;
    background: none;
    border: 0;
    filter:
        drop-shadow(0 13px 10px rgba(61, 43, 14, 0.38))
        drop-shadow(0 0 15px rgba(74, 222, 255, 0.88));
    cursor: pointer;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
}

.dr-lobby-seal:disabled {
    cursor: default;
    opacity: 1;
}

.dr-lobby-seal:focus-visible {
    outline: clamp(3px, 0.2vw, 5px) solid #fff7aa;
    outline-offset: clamp(5px, 0.45vw, 9px);
    border-radius: 20%;
}

.dr-lobby-seal img {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: dr-lobby-seal-float 3.2s ease-in-out infinite;
}

.dr-lobby-seal__halo,
.dr-lobby-seal__ward {
    position: absolute;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

.dr-lobby-seal__halo {
    inset: -36%;
    z-index: 1;
    background:
        radial-gradient(circle, rgba(255, 250, 190, 0.84), rgba(71, 222, 255, 0.42) 36%, transparent 69%);
    opacity: 0.72;
    animation: dr-lobby-seal-halo 1.8s ease-in-out infinite;
}

.dr-lobby-seal__ward {
    inset: -18%;
    z-index: 2;
    border: clamp(1px, 0.12vw, 3px) solid rgba(213, 251, 255, 0.82);
    box-shadow:
        inset 0 0 15px rgba(102, 228, 255, 0.34),
        0 0 15px rgba(98, 224, 255, 0.74);
    opacity: 0.76;
    animation: dr-lobby-ward-spin 5s linear infinite;
}

.dr-lobby-seal__ward::before,
.dr-lobby-seal__ward::after {
    content: "";
    position: absolute;
    inset: -7%;
    border: 1px dashed rgba(255, 232, 128, 0.78);
    border-radius: 50%;
}

.dr-lobby-seal__ward::after {
    inset: 13%;
    border-color: rgba(156, 243, 255, 0.7);
    animation: dr-lobby-ward-spin 3.2s linear infinite reverse;
}

.dr-lobby-seal.is-resonating {
    animation: dr-lobby-seal-resonate 880ms cubic-bezier(.15, 1.24, .28, 1) both;
}

.dr-lobby-seal.is-stamping img {
    animation: dr-lobby-seal-stamp 580ms cubic-bezier(.18, .82, .28, 1) both;
}

.dr-lobby-seal:not(.is-child-ready):hover img {
    filter: brightness(1.08) saturate(1.08);
    transform: translateY(-3%) scale(1.035);
}

.dr-lobby-seal.is-ready .dr-lobby-seal__halo {
    opacity: 1;
    filter: brightness(1.35);
}

#dr-lobby.is-roster-ready .dr-scene__background--seal-hall {
    filter: brightness(1.06) saturate(1.05);
}

@keyframes dr-lobby-energy-flow {
    to { stroke-dashoffset: -44; }
}

@keyframes dr-lobby-seal-float {
    0%, 100% { transform: translateY(1%); }
    50% { transform: translateY(-2.5%); }
}

@keyframes dr-lobby-seal-halo {
    0%, 100% { transform: scale(0.94); filter: brightness(1); }
    50% { transform: scale(1.06); filter: brightness(1.2); }
}

@keyframes dr-lobby-ward-spin {
    to { transform: rotate(360deg); }
}

@keyframes dr-lobby-seal-resonate {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    32% { transform: translate(-50%, -50%) scale(1.16); filter: brightness(1.45); }
    62% { transform: translate(-50%, -50%) scale(0.96); filter: brightness(1.08); }
}

@keyframes dr-lobby-seal-stamp {
    0% { transform: translateY(-3%) scale(1.04); filter: brightness(1.05); }
    42% { transform: translateY(9%) scale(0.96); filter: brightness(1.42); }
    72% { transform: translateY(-2%) scale(1.025); filter: brightness(1.2); }
    100% { transform: translateY(0) scale(1); filter: brightness(1); }
}

.dr-selection-hint {
    position: absolute;
    left: 50%;
    top: 15.5%;
    z-index: 7;
    margin: 0;
    padding: 0.34% 1.5% 0.4%;
    transform: translateX(-50%);
    color: #fff5c0;
    font-size: var(--dr-screen-caption-size);
    font-weight: var(--dr-title-weight);
    letter-spacing: 0.055em;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(38, 94, 143, 0.94), rgba(19, 58, 104, 0.96));
    border: clamp(1px, 0.1vw, 2px) solid rgba(247, 207, 101, 0.94);
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(94, 48, 8, 0.48), 0 0 14px rgba(80, 213, 255, 0.22);
}

.dr-color-picker {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
}

.dr-color-option {
    position: absolute;
    left: var(--altar-x);
    top: var(--altar-y);
    display: grid;
    width: 15.2%;
    aspect-ratio: 1.06;
    padding: 0;
    transform: translate(-50%, -50%);
    color: #fff;
    background: none;
    border: 0;
    cursor: pointer;
    pointer-events: auto;
    isolation: isolate;
    -webkit-tap-highlight-color: transparent;
}

.dr-color-option:focus-visible {
    outline: clamp(3px, 0.22vw, 5px) solid #fff2a2;
    outline-offset: clamp(4px, 0.35vw, 7px);
    border-radius: 48%;
}

.dr-color-option__beam {
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: -2;
    width: 112%;
    height: 122%;
    transform: translateX(-50%);
    background: linear-gradient(0deg,
        color-mix(in srgb, var(--color) 42%, transparent),
        rgba(233, 253, 255, 0.34) 48%,
        transparent 92%);
    clip-path: polygon(25% 100%, 75% 100%, 100% 0, 0 0);
    filter: blur(8px);
    opacity: 0.18;
    transition: opacity 220ms ease, filter 220ms ease;
    pointer-events: none;
}

.dr-color-option__rune {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: -1;
    width: 72%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scaleY(0.28);
    background:
        radial-gradient(circle, rgba(244, 255, 255, 0.76), color-mix(in srgb, var(--color) 58%, transparent) 48%, transparent 72%);
    border: clamp(2px, 0.16vw, 3px) solid color-mix(in srgb, var(--color) 72%, white);
    border-radius: 50%;
    box-shadow: 0 0 18px color-mix(in srgb, var(--color) 70%, transparent);
    opacity: 0.62;
    pointer-events: none;
}

.dr-color-option__rune::after {
    content: "";
    position: absolute;
    inset: 22% 16%;
    background: radial-gradient(ellipse, rgba(31, 66, 87, 0.34), transparent 70%);
    border-radius: 50%;
    filter: blur(4px);
}

.dr-color-option__dragon {
    position: absolute;
    left: 50%;
    top: auto;
    bottom: 52%;
    z-index: 2;
    width: 96%;
    height: 70%;
    transform: translateX(-50%) scale(var(--altar-scale, 1));
    object-fit: contain;
    filter: drop-shadow(0 11px 8px rgba(45, 37, 22, 0.34));
    transition: transform 240ms cubic-bezier(.16, 1.2, .3, 1), filter 220ms ease;
    animation: dr-selection-dragon-hover 2.7s ease-in-out var(--float-delay, 0s) infinite;
    pointer-events: none;
}

.dr-color-option:hover:not(:disabled) .dr-color-option__dragon,
.dr-color-option.is-selected .dr-color-option__dragon {
    transform: translateX(-50%) translateY(-6%) scale(calc(var(--altar-scale, 1) + 0.1));
    filter:
        brightness(1.08)
        drop-shadow(0 14px 8px rgba(45, 37, 22, 0.3))
        drop-shadow(0 0 15px color-mix(in srgb, var(--color) 72%, white));
}

.dr-color-option:hover:not(:disabled) .dr-color-option__beam,
.dr-color-option.is-selected .dr-color-option__beam {
    opacity: 0.78;
    filter: blur(5px) brightness(1.18);
}

.dr-color-option.is-selected .dr-color-option__rune {
    opacity: 1;
    box-shadow:
        0 0 10px #fff,
        0 0 28px color-mix(in srgb, var(--color) 76%, white);
}

.dr-color-option__plaque {
    position: absolute;
    left: 50%;
    bottom: -8%;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 0.55em;
    min-width: 74%;
    padding: 2.8% 9% 3.1%;
    transform: translateX(-50%);
    color: #fff7d0;
    background:
        radial-gradient(circle at 50% 0, color-mix(in srgb, var(--color) 24%, transparent), transparent 60%),
        linear-gradient(180deg, rgba(38, 96, 146, 0.97), rgba(18, 55, 101, 0.98));
    border: clamp(1px, 0.11vw, 2px) solid #efc65d;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(91, 48, 8, 0.55), 0 7px 14px rgba(24, 57, 83, 0.28);
    white-space: nowrap;
    pointer-events: none;
}

.dr-color-option__plaque strong {
    font-size: clamp(8px, 0.62vw, 13px);
    font-weight: 900;
    letter-spacing: 0.03em;
}

.dr-color-option__plaque small {
    color: #8feeff;
    font-size: clamp(6px, 0.45vw, 9px);
    font-weight: 1000;
}

.dr-color-option.is-selected .dr-color-option__plaque {
    color: #653207;
    background: linear-gradient(180deg, #fff7bc, #f5c34b);
    border-color: #fff5c2;
    box-shadow: 0 4px 0 #9c550d, 0 0 20px rgba(255, 224, 91, 0.82);
}

.dr-color-option.is-selected .dr-color-option__plaque small {
    color: #9d570b;
}

.dr-color-option__owner {
    position: absolute;
    left: 50%;
    top: -24%;
    z-index: 7;
    display: flex;
    align-items: center;
    gap: 0.38em;
    padding: 1.8% 6% 1.8% 2%;
    transform: translateX(-50%);
    color: #fff8d5;
    background: linear-gradient(180deg, rgba(28, 86, 139, 0.97), rgba(13, 47, 91, 0.98));
    border: clamp(1px, 0.1vw, 2px) solid #f0c65a;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(81, 42, 6, 0.52), 0 0 15px rgba(77, 208, 255, 0.32);
    white-space: nowrap;
    pointer-events: none;
}

.dr-color-option__owner img {
    width: clamp(20px, 1.8vw, 36px);
    aspect-ratio: 1;
    object-fit: cover;
    background: #d9f4ff;
    border: 1px solid white;
    border-radius: 50%;
}

.dr-color-option__owner strong {
    max-width: 9em;
    overflow: hidden;
    font-size: clamp(7px, 0.54vw, 11px);
    text-overflow: ellipsis;
}

.dr-color-option__owner.is-child {
    color: #603006;
    background: linear-gradient(180deg, #fff6b5, #f5c345);
    border-color: #fff8ce;
}

.dr-color-option.is-taken {
    cursor: default;
}

.dr-color-option.is-taken .dr-color-option__dragon {
    filter: saturate(0.86) brightness(0.88) drop-shadow(0 10px 8px rgba(45, 37, 22, 0.28));
}

.dr-color-option.is-taken .dr-color-option__beam {
    opacity: 0.4;
}

@keyframes dr-selection-dragon-hover {
    0%, 100% { translate: 0 1.5%; }
    50% { translate: 0 -4%; }
}

.dr-primary-button,
.dr-secondary-button,
.dr-roll-button {
    min-height: 52px;
    border: 0;
    border-radius: clamp(14px, 1.2vw, 25px);
    cursor: pointer;
}

.dr-primary-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4% 8%;
    color: #5a2b06;
    background:
        linear-gradient(180deg, #fff4a8 0%, #ffc943 50%, #f0a11a 100%);
    border: clamp(2px, 0.16vw, 4px) solid #fff2ae;
    box-shadow: 0 7px 0 #9a4f0b, 0 12px 20px rgba(94, 52, 10, 0.25);
    transition: transform 150ms ease, filter 150ms ease;
}

.dr-primary-button:hover:not(:disabled) {
    transform: translateY(-3px);
    filter: brightness(1.06);
}

.dr-primary-button:active:not(:disabled) {
    transform: translateY(4px);
    box-shadow: 0 3px 0 #9a4f0b;
}

.dr-primary-button:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    filter: grayscale(0.55);
}

.dr-primary-button span {
    font-size: clamp(15px, 1.25vw, 25px);
    font-weight: 800;
}

.dr-primary-button small {
    font-size: clamp(9px, 0.65vw, 13px);
    font-weight: 700;
}

.dr-secondary-button {
    padding: 0.75em 1.5em;
    color: #70400f;
    font-size: clamp(13px, 1vw, 20px);
    font-weight: 800;
    background: rgba(255, 250, 229, 0.91);
    border: 2px solid #e5b457;
    box-shadow: 0 5px 0 rgba(130, 72, 12, 0.3);
}

.dr-event-legend {
    position: absolute;
    right: 7%;
    top: 16%;
    z-index: 6;
    display: none;
    flex-direction: column;
    gap: 0.2em;
    padding: 0.45% 0.7%;
    color: #6b3c12;
    font-size: clamp(9px, 0.67vw, 14px);
    font-weight: 800;
    background: rgba(255, 251, 233, 0.87);
    border: 2px solid rgba(229, 181, 80, 0.92);
    border-radius: clamp(12px, 1vw, 20px);
    box-shadow: 0 5px 0 rgba(137, 76, 12, 0.25);
}

.dr-event-legend span {
    display: flex;
    align-items: center;
    gap: 0.35em;
}

.dr-event-legend img {
    width: clamp(20px, 1.7vw, 35px);
    height: clamp(20px, 1.7vw, 35px);
    object-fit: contain;
}

.dr-event-legend b {
    color: #b76510;
}

.dr-track-events {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.dr-lane-avatars {
    position: absolute;
    inset: 0;
    z-index: 13;
    pointer-events: none;
}

.dr-lane-avatar {
    position: absolute;
    left: var(--avatar-x);
    top: var(--avatar-y);
    display: flex;
    align-items: center;
    gap: clamp(3px, 0.3vw, 7px);
    max-width: 11%;
    min-width: 5.4%;
    padding: 0.22% 0.45% 0.22% 0.24%;
    transform: translate(-50%, -50%);
    color: #fff9dd;
    background: linear-gradient(135deg, rgba(18, 56, 99, 0.9), rgba(24, 35, 78, 0.92));
    border: 2px solid color-mix(in srgb, var(--racer-color) 70%, #fff1a2);
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(15, 31, 61, 0.42), 0 0 10px color-mix(in srgb, var(--racer-color) 38%, transparent);
    transition:
        left 430ms cubic-bezier(.19, .92, .28, 1.08),
        top 300ms ease,
        opacity 160ms ease,
        transform 170ms ease,
        filter 170ms ease;
}

.dr-lane-avatar.is-at-finish-end {
    flex-direction: row-reverse;
    padding: 0.22% 0.24% 0.22% 0.45%;
    text-align: right;
}

.dr-lane-avatar.is-child {
    border-color: #ffe26f;
    box-shadow: 0 3px 0 rgba(15, 31, 61, 0.42), 0 0 0 2px rgba(255, 225, 97, 0.34);
}

.dr-lane-avatar__portrait {
    position: relative;
    flex: 0 0 auto;
    width: clamp(24px, 2.15vw, 44px);
    aspect-ratio: 1;
    overflow: visible;
    background: #e9f8ff;
    border: 2px solid #fff5b7;
    border-radius: 50%;
}

.dr-lane-avatar__portrait > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.dr-lane-avatar__shield {
    position: absolute;
    right: -18%;
    bottom: -18%;
    z-index: 3;
    display: grid;
    width: 52%;
    aspect-ratio: 1;
    place-items: center;
    background: radial-gradient(circle, #dfffff 0 35%, #46cfff 58%, #1578cb 100%);
    border: 1px solid #efffff;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(93, 232, 255, 0.96);
    animation: dr-avatar-shield-pulse 1.25s ease-in-out infinite;
}

.dr-lane-avatar__portrait .dr-lane-avatar__shield img {
    width: 76%;
    height: 76%;
    object-fit: contain;
}

.dr-lane-avatar__name {
    display: grid;
    min-width: 0;
    line-height: 1;
}

.dr-lane-avatar__name strong {
    overflow: hidden;
    font-size: clamp(7px, 0.52vw, 11px);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.dr-lane-avatar__name small {
    margin-top: 0.15em;
    color: #aeeaff;
    font-size: clamp(5px, 0.34vw, 7px);
    font-weight: 900;
    letter-spacing: 0.07em;
}

.dr-lane-avatar__roll {
    position: absolute;
    left: 50%;
    top: -72%;
    display: grid;
    width: clamp(30px, 2.8vw, 56px);
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, 0);
    border-radius: 50%;
    filter: drop-shadow(0 3px 4px rgba(20, 36, 66, 0.46));
    animation: dr-avatar-roll-in 520ms cubic-bezier(.16, 1.25, .3, 1) both;
}

.dr-lane-avatar__roll img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dr-lane-avatar__roll b {
    position: absolute;
    right: -4%;
    bottom: -2%;
    display: grid;
    width: 38%;
    aspect-ratio: 1;
    place-items: center;
    color: #642f08;
    font-size: clamp(7px, 0.48vw, 10px);
    background: #fff3a9;
    border: 1px solid #d99624;
    border-radius: 50%;
}

.dr-lane-avatar__roll.is-frozen {
    color: white;
    font-size: clamp(18px, 1.65vw, 34px);
    background: radial-gradient(circle, #dffaff, #4cb8e7 68%, transparent 72%);
}

.is-choosing-skill-owner .dr-lane-avatar {
    opacity: 0.48;
}

.is-choosing-skill-owner .dr-lane-avatar.is-skill-scanning {
    z-index: 5;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.14);
    filter: brightness(1.35) drop-shadow(0 0 14px #fff6a5);
}

.is-choosing-skill-owner .dr-lane-avatar.is-skill-chosen {
    z-index: 6;
    opacity: 1;
    animation: dr-skill-owner-chosen 620ms cubic-bezier(.18, 1.35, .28, 1) both;
}

@keyframes dr-avatar-roll-in {
    0% { opacity: 0; transform: translate(-50%, 0) scale(0.2) rotate(-40deg); }
    70% { opacity: 1; transform: translate(-50%, 0) scale(1.15) rotate(4deg); }
    100% { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(0); }
}

@keyframes dr-skill-owner-chosen {
    0% { transform: translate(-50%, -50%) scale(1); filter: brightness(1); }
    48% { transform: translate(-50%, -50%) scale(1.32); filter: brightness(1.65) drop-shadow(0 0 24px #fff3a0); }
    100% { transform: translate(-50%, -50%) scale(1.12); filter: brightness(1.2) drop-shadow(0 0 14px #ffe477); }
}

.dr-skill-pickups {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}

.dr-skill-pickups.has-checkpoint::before {
    content: "THẦN PHÙ BÍ ẨN · AI TỚI TRƯỚC SẼ NHẬN";
    position: absolute;
    left: 50%;
    top: 21.5%;
    z-index: 14;
    padding: 0.25em 0.8em;
    transform: translateX(-50%);
    color: #fff5b5;
    font-size: clamp(8px, 0.62vw, 13px);
    font-weight: 900;
    letter-spacing: 0.06em;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(75, 43, 139, 0.92), rgba(38, 20, 91, 0.94));
    border: 2px solid rgba(255, 225, 116, 0.92);
    border-radius: 999px;
    box-shadow: 0 5px 0 rgba(39, 19, 77, 0.28), 0 0 20px rgba(178, 104, 255, 0.28);
    animation: dr-checkpoint-banner-in 650ms cubic-bezier(.14, 1.35, .22, 1) both;
}

.dr-skill-pickup {
    position: absolute;
    left: var(--pickup-x);
    top: var(--pickup-y);
    display: grid;
    width: var(--pickup-size, 2.8%);
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 9px rgba(255, 238, 119, 0.9));
    opacity: 1;
    animation: dr-skill-pickup-calm 2.6s ease-in-out infinite;
}

.dr-skill-pickup::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50%;
    z-index: -1;
    width: 135%;
    height: 230%;
    transform: translateX(-50%);
    background: linear-gradient(0deg, rgba(255, 242, 137, 0.62), rgba(85, 216, 255, 0.06) 78%, transparent);
    clip-path: polygon(28% 100%, 72% 100%, 100% 0, 0 0);
    filter: blur(4px);
    opacity: 0.72;
}

.dr-skill-pickup img {
    position: relative;
    z-index: 2;
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.dr-skill-pickup small {
    position: absolute;
    left: 50%;
    bottom: -22%;
    z-index: 4;
    padding: 1% 10%;
    transform: translateX(-50%);
    color: #fff6c7;
    font-size: clamp(6px, 0.42vw, 9px);
    font-weight: 900;
    letter-spacing: 0.08em;
    background: rgba(67, 35, 122, 0.88);
    border: 1px solid rgba(255, 231, 132, 0.9);
    border-radius: 999px;
    box-shadow: 0 2px 0 rgba(40, 21, 78, 0.36);
}

.dr-skill-pickup--reverse img {
    width: 65%;
    height: 65%;
}

.dr-skill-pickup--reverse::after {
    content: "↶";
    position: absolute;
    z-index: 3;
    right: -5%;
    bottom: -10%;
    display: grid;
    width: 45%;
    aspect-ratio: 1;
    place-items: center;
    color: #fff;
    font-size: clamp(10px, 0.9vw, 18px);
    font-weight: 800;
    background: #7831bd;
    border: 2px solid #fff0ac;
    border-radius: 50%;
}

.dr-skill-pickup.is-being-collected {
    z-index: 12;
    animation: dr-skill-pickup-collect 560ms ease-out both;
}

.dr-skill-pickup.is-newly-landed {
    z-index: 13;
    animation: dr-skill-pickup-land 620ms cubic-bezier(.16, 1, .3, 1) both;
}

.dr-skill-pickup__ring {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(255, 246, 168, 0.94);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 252, 212, 0.94), rgba(45, 200, 255, 0.48) 56%, transparent 72%);
    box-shadow: 0 0 14px rgba(69, 220, 255, 0.9);
    animation: dr-skill-ring 3.2s linear infinite;
}

.dr-skill-pickup--petrify .dr-skill-pickup__ring {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.94), rgba(117, 211, 255, 0.5) 56%, transparent 72%);
}

.dr-skill-pickup--reverse .dr-skill-pickup__ring {
    background: radial-gradient(circle, rgba(255, 248, 175, 0.96), rgba(178, 74, 235, 0.62) 56%, transparent 72%);
    box-shadow: 0 0 14px rgba(203, 101, 255, 0.95);
}

.dr-skill-pickup--mystery img {
    width: 76%;
    height: 76%;
    filter: saturate(1.12) brightness(1.1) drop-shadow(0 0 6px rgba(255, 221, 90, 0.88));
}

.dr-skill-pickup--mystery .dr-skill-pickup__ring {
    border-color: rgba(190, 255, 211, 0.98);
    background:
        radial-gradient(circle, rgba(255, 253, 205, 0.98) 0 15%, rgba(66, 224, 157, 0.82) 36%, rgba(13, 111, 102, 0.58) 63%, transparent 72%),
        conic-gradient(from 0deg, #85ffd1, #1bcda2, #ffe66d, #85ffd1);
    box-shadow:
        0 0 14px rgba(81, 240, 179, 0.98),
        0 0 28px rgba(27, 159, 139, 0.72);
}

.dr-skill-pickup--mystery small {
    min-width: 1.65em;
    padding: 2% 0;
    color: #fff9c9;
    font-size: clamp(9px, 0.7vw, 14px);
    text-align: center;
    background: linear-gradient(180deg, #20b996, #087669);
    border-color: #d5ffe4;
}

@keyframes dr-checkpoint-banner-in {
    from { opacity: 0; transform: translate(-50%, -12px) scale(0.78); }
    68% { opacity: 1; transform: translate(-50%, 2px) scale(1.05); }
    to { transform: translate(-50%, 0) scale(1); }
}

.dr-skill-courier {
    position: absolute;
    z-index: 18;
    left: -18%;
    top: var(--courier-y, 18%);
    width: 8.5%;
    opacity: 0;
    pointer-events: none;
}

.dr-skill-courier.is-dropping {
    animation: dr-skill-courier-drop 2.25s cubic-bezier(.22, .61, .36, 1) both;
}

.dr-skill-courier > img:not(.dr-skill-courier__payload) {
    width: 100%;
    filter: drop-shadow(0 5px 8px rgba(26, 83, 144, 0.44));
}

.dr-skill-courier .dr-skill-courier__payload {
    position: absolute;
    left: 52%;
    top: 60%;
    z-index: 2;
    width: 34%;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0;
    filter: drop-shadow(0 0 8px rgba(255, 238, 118, 0.95));
}

.dr-skill-courier.is-dropping .dr-skill-courier__payload {
    animation: dr-skill-courier-payload 2.25s cubic-bezier(.22, .61, .36, 1) both;
}

.dr-skill-courier span {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: -8%;
    padding: 3% 11%;
    transform: translateX(-50%);
    color: #66340a;
    font-size: clamp(8px, 0.65vw, 13px);
    font-weight: 800;
    white-space: nowrap;
    background: #fff7d6;
    border: 2px solid #e9b64d;
    border-radius: 999px;
}

@keyframes dr-skill-pickup-calm {
    0%, 100% { scale: 0.985; opacity: 0.92; }
    50% { scale: 1.015; opacity: 1; }
}

@keyframes dr-skill-pickup-arrive {
    0% { opacity: 0; scale: 0.15; filter: brightness(2.2); }
    64% { opacity: 1; scale: 1.22; filter: brightness(1.4); }
    100% { opacity: 1; scale: 1; filter: brightness(1); }
}

@keyframes dr-skill-pickup-collect {
    0% { opacity: 1; scale: 1; filter: brightness(1); }
    62% { opacity: 0.92; scale: 1.1; filter: brightness(1.55); }
    100% { opacity: 0; scale: 0.94; filter: brightness(1.9); }
}

@keyframes dr-skill-pickup-land {
    0% { opacity: 0; scale: 0.72; filter: brightness(2) drop-shadow(0 0 18px #fff7a9); }
    68% { opacity: 1; scale: 1.06; filter: brightness(1.35) drop-shadow(0 0 20px #fff7a9); }
    100% { opacity: 1; scale: 1; filter: brightness(1) drop-shadow(0 0 9px rgba(255, 238, 119, 0.9)); }
}

@keyframes dr-skill-ring {
    0% { rotate: 0deg; opacity: 0.78; }
    50% { opacity: 0.96; }
    100% { rotate: 360deg; opacity: 0.78; }
}

@keyframes dr-skill-courier-pass {
    0% { left: -18%; opacity: 0; transform: translateY(0) rotate(-5deg); }
    10% { opacity: 1; }
    48% { transform: translateY(18%) rotate(3deg); }
    88% { opacity: 1; }
    100% { left: 106%; opacity: 0; transform: translateY(-8%) rotate(-3deg); }
}

@keyframes dr-skill-courier-drop {
    0% { left: -12%; opacity: 0; transform: translateY(-16%) rotate(-4deg) scale(0.78); }
    12% { opacity: 1; }
    48% { left: calc(var(--courier-target-x) - 4.25%); opacity: 1; transform: translateY(0) rotate(3deg) scale(1); }
    58% { left: calc(var(--courier-target-x) - 4.25%); opacity: 1; transform: translateY(-8%) rotate(-2deg) scale(1.05); }
    70% { opacity: 1; }
    100% { left: 104%; opacity: 0; transform: translateY(-14%) rotate(-3deg) scale(0.85); }
}

@keyframes dr-skill-courier-payload {
    0%, 43% { opacity: 0; transform: translate(-50%, -35%) scale(0.35) rotate(-25deg); }
    50% { opacity: 1; transform: translate(-50%, 0) scale(0.72) rotate(4deg); }
    70% { opacity: 1; transform: translate(-50%, 150%) scale(1) rotate(18deg); }
    82%, 100% { opacity: 0; transform: translate(-50%, 205%) scale(0.82) rotate(28deg); }
}

.dr-skill-fall {
    position: absolute;
    left: var(--skill-fall-x);
    top: var(--skill-fall-start-y);
    z-index: 19;
    display: grid;
    width: var(--skill-fall-size, 4%);
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    animation: dr-skill-fall 820ms cubic-bezier(.2, .76, .25, 1) both;
}

.dr-skill-fall i {
    position: absolute;
    inset: -45%;
    background: radial-gradient(circle, rgba(255, 252, 190, 0.96), rgba(50, 232, 165, 0.48) 42%, rgba(10, 111, 104, 0.16) 62%, transparent 72%);
    border-radius: 50%;
    animation: dr-skill-fall-glow 1.6s ease-in-out infinite alternate;
}

.dr-skill-fall img {
    position: relative;
    z-index: 2;
    width: 90%;
    height: 90%;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(255, 232, 103, 0.96)) drop-shadow(0 0 18px rgba(55, 227, 165, 0.78));
}

.dr-skill-fall strong {
    position: absolute;
    left: 50%;
    bottom: -42%;
    z-index: 3;
    padding: 5% 15%;
    transform: translateX(-50%);
    color: #5b2d0a;
    font-size: clamp(7px, 0.55vw, 11px);
    font-weight: 900;
    white-space: nowrap;
    background: #fff4bc;
    border: 2px solid #e8ab3d;
    border-radius: 999px;
}

.dr-skill-fall.has-landed {
    filter: brightness(1.55);
}

@keyframes dr-skill-fall {
    0% {
        top: var(--skill-fall-start-y);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.62) rotate(-8deg);
    }
    22% { opacity: 1; }
    82% {
        top: var(--skill-fall-end-y);
        transform: translate(-50%, -52%) scale(1.03) rotate(2deg);
    }
    100% {
        top: var(--skill-fall-end-y);
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) rotate(0);
    }
}

@keyframes dr-skill-fall-glow {
    to { scale: 1.25; opacity: 0.62; }
}

.dr-track-event {
    position: absolute;
    left: var(--event-x);
    top: var(--event-y);
    width: var(--event-size, 2.8%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0.82;
    filter: drop-shadow(0 2px 2px rgba(64, 35, 8, 0.24));
    transition: filter 180ms ease, transform 180ms ease;
}

.dr-track-event::before {
    content: "";
    position: absolute;
    inset: -18%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--event-shadow) 46%, transparent), transparent 68%);
    border: 1px solid color-mix(in srgb, var(--event-border) 55%, transparent);
    box-shadow: 0 0 9px color-mix(in srgb, var(--event-shadow) 52%, transparent);
    animation: dr-event-cell-pulse 2.4s ease-in-out var(--event-delay, 0s) infinite;
}

.dr-track-event img {
    position: relative;
    z-index: 2;
    display: block;
    width: 84%;
    height: 84%;
    margin: 8%;
    object-fit: contain;
}

.dr-track-event__mystery {
    position: relative;
    z-index: 2;
    display: grid;
    width: 88%;
    aspect-ratio: 1;
    margin: 6%;
    place-items: center;
    color: #fff9c8;
    font-size: clamp(11px, 0.9vw, 19px);
    font-weight: 1000;
    text-shadow: 0 2px 0 #8a4b0b, 0 0 8px white;
    background:
        radial-gradient(circle, rgba(255, 255, 226, 0.96) 0 14%, rgba(76, 210, 255, 0.66) 16% 38%, transparent 42%),
        conic-gradient(from 12deg, #ffe365, #5ee9ff, #c78bff, #ffde57);
    border: 1px solid rgba(255, 250, 193, 0.96);
    border-radius: 50%;
    box-shadow: inset 0 0 7px rgba(255, 255, 255, 0.92), 0 0 9px rgba(98, 219, 255, 0.72);
}

.dr-track-event__puddle {
    position: relative;
    z-index: 2;
    display: block;
    width: 118%;
    height: 58%;
    margin: 22% -9% 0;
    background:
        radial-gradient(ellipse at 45% 35%, rgba(241, 255, 255, 0.96) 0 8%, transparent 10%),
        radial-gradient(ellipse at center, #82e6ff 0 26%, #2eb6ef 47%, #157bc9 73%, rgba(13, 103, 181, 0.18) 76%);
    border: 1px solid rgba(211, 252, 255, 0.96);
    border-radius: 50%;
    box-shadow:
        inset 0 -3px 5px rgba(9, 85, 163, 0.46),
        0 2px 4px rgba(22, 83, 140, 0.38),
        0 0 8px rgba(92, 220, 255, 0.82);
    transform: rotate(-4deg);
    animation: dr-puddle-shimmer 1.8s ease-in-out var(--event-delay, 0s) infinite;
}

.dr-track-event__puddle i {
    position: absolute;
    display: block;
    width: 17%;
    aspect-ratio: 0.72;
    background: linear-gradient(145deg, #eaffff, #38c7f4 58%, #1889d4);
    border-radius: 55% 45% 58% 42% / 68% 42% 58% 32%;
    box-shadow: 0 0 4px rgba(202, 251, 255, 0.92);
    transform: rotate(35deg);
}

.dr-track-event__puddle i:nth-child(1) {
    left: 8%;
    top: -31%;
}

.dr-track-event__puddle i:nth-child(2) {
    right: 10%;
    top: -19%;
    width: 12%;
    transform: rotate(-28deg);
}

.dr-track-event__puddle i:nth-child(3) {
    right: 31%;
    bottom: -26%;
    width: 9%;
    transform: rotate(74deg);
}

.dr-track-event small {
    position: absolute;
    right: -9%;
    bottom: -8%;
    z-index: 3;
    display: grid;
    min-width: 36%;
    aspect-ratio: 1;
    place-items: center;
    color: white;
    font-size: clamp(7px, 0.48vw, 10px);
    font-weight: 800;
    background: var(--event-badge);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0 3px 0 rgba(86, 42, 8, 0.35);
}

.dr-track-event.is-triggered {
    z-index: 12;
    filter: brightness(1.45) drop-shadow(0 0 18px rgba(255, 247, 156, 0.98));
    transform: translate(-50%, -50%) scale(1.22);
}

.dr-track-event.is-triggered::after {
    content: "";
    position: absolute;
    inset: -46%;
    z-index: -1;
    border: clamp(2px, 0.18vw, 4px) solid rgba(255, 247, 156, 0.92);
    border-radius: 50%;
    animation: dr-cell-impact 420ms ease-out both;
}

@keyframes dr-cell-impact {
    0% { opacity: 0.95; transform: scale(0.35); }
    100% { opacity: 0; transform: scale(1.45); }
}

.dr-track-event--tailwind {
    --event-glow: linear-gradient(145deg, rgba(214, 253, 255, 0.9), rgba(34, 195, 241, 0.74));
    --event-border: #a9f8ff;
    --event-shadow: rgba(45, 211, 245, 0.8);
    --event-badge: #168bc5;
}

.dr-track-event--sticky_cloud {
    --event-glow: linear-gradient(145deg, rgba(252, 226, 255, 0.92), rgba(151, 65, 205, 0.78));
    --event-border: #f0b7ff;
    --event-shadow: rgba(173, 73, 222, 0.78);
    --event-badge: #8431ad;
}

.dr-track-event--mystery_star {
    --event-glow: linear-gradient(145deg, rgba(255, 253, 207, 0.96), rgba(255, 180, 39, 0.8));
    --event-border: #fff3a6;
    --event-shadow: rgba(255, 195, 48, 0.88);
    --event-badge: #c67a0c;
}

.dr-track-event--mystery_tile {
    --event-border: #fff2a6;
    --event-shadow: rgba(98, 210, 255, 0.78);
    --event-badge: #7d4abb;
    opacity: 0.9;
}

.dr-track-event--puddle {
    --event-border: #c6fbff;
    --event-shadow: rgba(50, 190, 242, 0.72);
    --event-badge: #168bc5;
    opacity: 0.94;
}

.dr-track-event--mystery_tile small,
.dr-track-event--puddle small {
    display: none;
}

.dr-track-event.is-consumed {
    opacity: 0.16;
    filter: grayscale(0.8) brightness(0.82);
}

.dr-track-event.is-consumed::before {
    animation: none;
    box-shadow: none;
}

@keyframes dr-event-cell-pulse {
    0%, 100% { opacity: 0.88; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.035); }
}

.dr-racers {
    position: absolute;
    inset: 0;
    z-index: 5;
}

.dr-racer {
    position: absolute;
    left: var(--racer-x);
    top: var(--racer-y);
    width: var(--racer-size, 4.6%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    transition: left 430ms cubic-bezier(.19, .92, .28, 1.08), top 300ms ease;
    filter: drop-shadow(0 5px 4px rgba(58, 36, 9, 0.28));
    isolation: isolate;
}

.dr-racer.is-active {
    z-index: 8;
}

.dr-racer.is-moving {
    z-index: 9;
}

.dr-racer.is-stepping::after {
    content: "";
    position: absolute;
    right: 55%;
    top: 34%;
    z-index: -1;
    width: 145%;
    height: 34%;
    background:
        linear-gradient(90deg, transparent, color-mix(in srgb, var(--racer-color) 68%, white), rgba(255, 255, 255, 0.84));
    border-radius: 999px;
    filter: blur(5px);
    transform-origin: right center;
    animation: dr-racer-trail 480ms ease-out both;
}

.dr-racer.is-moving .dr-racer__image {
    animation: none;
}

.dr-racer.is-moving .dr-racer__beam,
.dr-racer.is-stepping .dr-racer__beam {
    opacity: 0 !important;
    animation: none !important;
}

.dr-racer.is-stepping .dr-racer__image {
    animation: dr-racer-step 480ms cubic-bezier(.16, 1, .3, 1) both;
}

.dr-racer.is-active::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 244, 129, 0.92), rgba(255, 195, 46, 0.22) 56%, transparent 72%);
    border-radius: 50%;
    animation: dr-pulse 1s ease-in-out infinite;
}

.dr-racer__beam {
    position: absolute;
    z-index: 0;
    left: 50%;
    bottom: -26%;
    display: flex;
    justify-content: center;
    width: 156%;
    height: 238%;
    transform: translateX(-50%);
    transform-origin: bottom center;
    pointer-events: none;
    opacity: 0.7;
    mix-blend-mode: screen;
    -webkit-mask-image: linear-gradient(
        to top,
        black 0%,
        black 48%,
        rgba(0, 0, 0, 0.66) 70%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to top,
        black 0%,
        black 48%,
        rgba(0, 0, 0, 0.66) 70%,
        transparent 100%
    );
    animation: dr-racer-beam 1.65s ease-in-out infinite;
}

.dr-racer__beam-core {
    position: absolute;
    left: 50%;
    bottom: 7%;
    width: 62%;
    height: 93%;
    transform: translateX(-50%);
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            color-mix(in srgb, var(--racer-color) 32%, transparent) 12%,
            color-mix(in srgb, var(--racer-color) 68%, white) 46%,
            rgba(255, 255, 255, 0.88) 50%,
            color-mix(in srgb, var(--racer-color) 68%, white) 54%,
            color-mix(in srgb, var(--racer-color) 32%, transparent) 88%,
            transparent 100%
        );
    border-radius: 999px 999px 45% 45% / 58% 58% 7% 7%;
    filter: blur(5px) drop-shadow(0 0 8px var(--racer-color));
    opacity: 0.78;
}

.dr-racer__beam-streaks {
    position: absolute;
    left: 50%;
    bottom: 6%;
    width: 76%;
    height: 91%;
    transform: translateX(-50%);
    opacity: 0.56;
    background-image:
        linear-gradient(
            to top,
            transparent,
            rgba(255, 255, 255, 0.92),
            transparent
        ),
        linear-gradient(
            to top,
            transparent,
            color-mix(in srgb, var(--racer-color) 72%, white),
            transparent
        );
    background-repeat: no-repeat;
    background-size: 2px 56%, 1px 68%;
    filter: blur(1px);
    animation: dr-racer-beam-streaks 2.8s linear infinite;
}

.dr-racer__beam-base {
    position: absolute;
    left: 50%;
    bottom: 4%;
    width: 72%;
    height: 12%;
    transform: translateX(-50%);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 255, 255, 0.98) 0%,
            color-mix(in srgb, var(--racer-color) 72%, white) 26%,
            color-mix(in srgb, var(--racer-color) 52%, transparent) 51%,
            transparent 73%
        );
    box-shadow:
        0 0 10px 3px color-mix(in srgb, var(--racer-color) 72%, transparent),
        inset 0 0 9px 3px color-mix(in srgb, var(--racer-color) 56%, transparent);
    filter: blur(0.5px);
}

.dr-racer-event-impact {
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 8;
    display: grid;
    width: 155%;
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    pointer-events: none;
    animation: dr-local-event-impact 920ms cubic-bezier(.16, 1, .3, 1) both;
}

.dr-racer-event-impact i {
    position: absolute;
    inset: 4%;
    border: 3px solid rgba(255, 247, 165, 0.94);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 252, 216, 0.86), rgba(76, 213, 255, 0.3) 40%, transparent 70%);
    box-shadow: 0 0 16px rgba(255, 238, 117, 0.92);
    animation: dr-local-event-ring 920ms ease-out both;
}

.dr-racer-event-impact img {
    position: relative;
    z-index: 2;
    width: 62%;
    height: 62%;
    object-fit: contain;
    filter: drop-shadow(0 6px 6px rgba(39, 35, 73, 0.38));
    animation: dr-local-event-icon 920ms cubic-bezier(.16, 1.24, .3, 1) both;
}

.dr-racer-event-impact b {
    position: absolute;
    right: 4%;
    bottom: 4%;
    z-index: 4;
    display: grid;
    width: 35%;
    aspect-ratio: 1;
    place-items: center;
    color: #fff9d1;
    font-size: clamp(9px, 0.72vw, 15px);
    font-weight: 1000;
    background: #168bc5;
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 3px 0 rgba(40, 50, 93, 0.34);
}

.dr-racer-event-impact--sticky_cloud i {
    background: radial-gradient(circle, rgba(250, 228, 255, 0.92), rgba(161, 64, 213, 0.48) 42%, transparent 72%);
    box-shadow: 0 0 16px rgba(198, 109, 241, 0.94);
}

.dr-racer-event-impact--sticky_cloud b {
    background: #8431ad;
}

.dr-racer-event-impact--mystery_star i,
.dr-racer-event-impact--mystery_tile i {
    background: radial-gradient(circle, rgba(255, 251, 209, 0.96), rgba(255, 190, 42, 0.48) 42%, transparent 72%);
    box-shadow: 0 0 18px rgba(255, 203, 57, 0.98);
}

.dr-racer-event-impact--mystery_star b,
.dr-racer-event-impact--mystery_tile b {
    background: #c67a0c;
}

.dr-racer-event-impact--skill-collect i {
    background: radial-gradient(circle, rgba(255, 253, 206, 0.98), rgba(53, 229, 163, 0.56) 42%, rgba(10, 117, 103, 0.16) 63%, transparent 72%);
    border-color: #c9ffdc;
    box-shadow: 0 0 20px rgba(69, 238, 177, 0.98);
}

.dr-racer-event-impact--skill-collect b {
    background: linear-gradient(145deg, #26c79d, #087267);
}

.dr-racer-event-impact--puddle {
    width: 175%;
}

.dr-racer-event-impact--puddle i {
    border-color: #c9f9ff;
    background:
        radial-gradient(circle, rgba(235, 255, 255, 0.98), rgba(42, 188, 241, 0.58) 42%, transparent 72%);
    box-shadow: 0 0 20px rgba(79, 218, 255, 0.98);
}

.dr-racer-event-impact--puddle b {
    width: auto;
    min-width: 54%;
    aspect-ratio: auto;
    padding: 5% 8%;
    background: linear-gradient(145deg, #3bcff4, #1268bb);
    border-radius: 999px;
}

.dr-racer-event-impact--shield-collect i {
    border-color: #d8ffff;
    background:
        radial-gradient(circle, rgba(240, 255, 255, 0.98), rgba(44, 202, 246, 0.58) 42%, rgba(18, 102, 196, 0.16) 64%, transparent 72%);
    box-shadow: 0 0 22px rgba(86, 227, 255, 0.98);
}

@keyframes dr-local-event-impact {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.25); }
    24%, 72% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -55%) scale(1.18); }
}

@keyframes dr-local-event-ring {
    0% { opacity: 1; transform: scale(0.2); }
    100% { opacity: 0; transform: scale(1.45); }
}

@keyframes dr-local-event-icon {
    0% { opacity: 0; transform: scale(0.2) rotate(-18deg); }
    32% { opacity: 1; transform: scale(1.12) rotate(4deg); }
    75% { opacity: 1; transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(1.08); }
}

.dr-racer__lap-aura {
    position: absolute;
    z-index: 1;
    inset: -17%;
    pointer-events: none;
    opacity: 0;
    transform: scale(0.72);
    transition: opacity 280ms ease, transform 360ms cubic-bezier(.2, .9, .3, 1.2);
}

.dr-racer__lap-aura::before,
.dr-racer__lap-aura::after {
    content: "";
    position: absolute;
    inset: 7%;
    border-radius: 50%;
}

.dr-racer__lap-aura::before {
    background:
        conic-gradient(
            from 20deg,
            transparent 0 9%,
            #fff8bd 11%,
            var(--racer-color) 17%,
            transparent 22% 42%,
            #ffffff 46%,
            var(--racer-color) 54%,
            transparent 61% 81%,
            #ffe16a 85%,
            transparent 92%
        );
    -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 58% 67%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 55%, #000 58% 67%, transparent 70%);
    filter: drop-shadow(0 0 5px var(--racer-color));
    animation: dr-lap-two-spin 2.2s linear infinite;
}

.dr-racer__lap-aura::after {
    border: 2px solid color-mix(in srgb, var(--racer-color) 68%, white);
    box-shadow:
        0 0 12px color-mix(in srgb, var(--racer-color) 70%, white),
        inset 0 0 12px color-mix(in srgb, var(--racer-color) 36%, transparent);
    animation: dr-lap-two-pulse 1.25s ease-in-out infinite;
}

.dr-racer__lap-aura i {
    position: absolute;
    z-index: 4;
    top: -1%;
    right: 0;
    display: grid;
    place-items: center;
    width: 27%;
    aspect-ratio: 1;
    color: #6d3600;
    font-size: clamp(7px, 0.52vw, 11px);
    font-style: normal;
    font-weight: 1000;
    line-height: 1;
    border: 1px solid #fff7c6;
    border-radius: 50%;
    background: linear-gradient(145deg, #fffbd5, #ffc529);
    box-shadow: 0 0 0 2px var(--racer-color), 0 3px 8px rgba(70, 38, 0, 0.36);
}

.dr-racer.is-leg-two .dr-racer__lap-aura {
    opacity: 1;
    transform: scale(1);
}

.dr-racer.is-leg-two .dr-racer__beam {
    opacity: 0.9;
    filter: blur(2px) brightness(1.18) drop-shadow(0 0 11px var(--racer-color));
}

.dr-racer__image {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    animation: dr-racer-bob 1.4s ease-in-out infinite;
}

.dr-racer__sprite {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    transform: scaleX(-1);
    transform-origin: center;
}

.dr-racer__status-vfx {
    position: absolute;
    inset: -34%;
    z-index: 4;
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.dr-racer__status-ring,
.dr-racer__status-particles {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: 50%;
}

.dr-racer__status-vfx b {
    position: absolute;
    left: 50%;
    top: -6%;
    display: grid;
    width: 35%;
    aspect-ratio: 1;
    place-items: center;
    transform: translateX(-50%);
    color: white;
    font-size: clamp(14px, 1.25vw, 26px);
    font-weight: 1000;
    line-height: 1;
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    box-shadow: 0 3px 0 rgba(45, 31, 74, 0.34);
}

.dr-racer__shield {
    position: absolute;
    inset: -31%;
    z-index: 5;
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.62);
    transition: opacity 260ms ease, transform 420ms cubic-bezier(.16, 1.24, .3, 1);
}

.dr-racer.has-shield .dr-racer__shield {
    opacity: 1;
    transform: scale(1);
}

.dr-racer__shield i {
    position: absolute;
    inset: 4%;
    border: clamp(1px, 0.13vw, 3px) solid rgba(218, 253, 255, 0.92);
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.32), transparent 24%),
        radial-gradient(circle, rgba(80, 221, 255, 0.18), rgba(29, 118, 220, 0.09) 58%, transparent 70%);
    box-shadow:
        inset 0 0 13px rgba(176, 249, 255, 0.82),
        0 0 10px rgba(67, 211, 255, 0.92),
        0 0 20px rgba(37, 133, 230, 0.54);
    animation: dr-shield-aura 1.35s ease-in-out infinite;
}

.dr-racer__shield img {
    position: absolute;
    right: -1%;
    top: 0;
    width: 32%;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 0 5px rgba(181, 251, 255, 0.96));
    animation: dr-shield-icon-float 1.25s ease-in-out infinite;
}

.dr-racer.is-reversed .dr-racer__status-vfx {
    opacity: 1;
}

.dr-racer.is-reversed .dr-racer__status-ring {
    background: conic-gradient(
        from 20deg,
        transparent 0 9%,
        rgba(237, 181, 255, 0.95) 11% 25%,
        transparent 27% 46%,
        rgba(168, 69, 232, 0.96) 49% 68%,
        transparent 71% 88%,
        rgba(255, 218, 122, 0.92) 90% 100%
    );
    -webkit-mask: radial-gradient(circle, transparent 0 57%, #000 60% 68%, transparent 71%);
    mask: radial-gradient(circle, transparent 0 57%, #000 60% 68%, transparent 71%);
    filter: drop-shadow(0 0 6px rgba(197, 98, 255, 0.98));
    animation: dr-reverse-status-spin 1.1s linear infinite;
}

.dr-racer.is-reversed .dr-racer__status-particles {
    background:
        radial-gradient(circle at 15% 48%, #ffe89b 0 3%, transparent 4%),
        radial-gradient(circle at 80% 24%, #f2bcff 0 3%, transparent 4%),
        radial-gradient(circle at 86% 72%, #b75cff 0 2.5%, transparent 4%),
        radial-gradient(circle at 32% 88%, #fff3b2 0 2.5%, transparent 4%);
    animation: dr-status-particles-pulse 780ms ease-in-out infinite alternate;
}

.dr-racer.is-reversed .dr-racer__status-vfx b {
    background: linear-gradient(145deg, #d27aff, #6d249d);
}

.dr-racer.is-reversed .dr-racer__status-vfx b::before {
    content: "↶";
}

.dr-racer.is-petrified .dr-racer__status-vfx {
    opacity: 1;
}

.dr-racer.is-petrified .dr-racer__status-ring {
    inset: 4%;
    border: 3px solid rgba(210, 248, 255, 0.96);
    background:
        repeating-conic-gradient(
            from 8deg,
            rgba(229, 252, 255, 0.8) 0 4deg,
            transparent 5deg 25deg
        ),
        radial-gradient(circle, rgba(198, 242, 255, 0.34), rgba(67, 166, 218, 0.08) 58%, transparent 70%);
    box-shadow:
        inset 0 0 18px rgba(190, 241, 255, 0.88),
        0 0 18px rgba(113, 221, 255, 0.92);
    animation: dr-petrify-status-pulse 1s ease-in-out infinite;
}

.dr-racer.is-petrified .dr-racer__status-particles {
    inset: -5%;
    background:
        linear-gradient(38deg, transparent 47%, rgba(220, 250, 255, 0.92) 49% 51%, transparent 53%),
        linear-gradient(142deg, transparent 47%, rgba(136, 221, 255, 0.8) 49% 51%, transparent 53%);
    -webkit-mask: radial-gradient(circle, transparent 0 42%, #000 45% 67%, transparent 70%);
    mask: radial-gradient(circle, transparent 0 42%, #000 45% 67%, transparent 70%);
    animation: dr-petrify-crystal-spin 4s linear infinite;
}

.dr-racer.is-petrified .dr-racer__status-vfx b {
    background: linear-gradient(145deg, #e8fbff, #409dd1);
}

.dr-racer.is-petrified .dr-racer__status-vfx b::before {
    content: "❄";
}

.dr-racer.is-facing-left .dr-racer__sprite {
    transform: scaleX(1);
}

.dr-racer.is-reversed {
    filter: drop-shadow(0 0 10px rgba(189, 82, 255, 0.95));
}

.dr-racer.is-reversed::after {
    background: linear-gradient(90deg, rgba(213, 142, 255, 0.88), rgba(122, 44, 196, 0.1));
}

.dr-racer.is-petrified {
    z-index: 10;
    filter: drop-shadow(0 7px 5px rgba(37, 67, 91, 0.42)) grayscale(0.08);
}

.dr-racer.is-petrified .dr-racer__image {
    animation: dr-statue-freeze 1.1s ease-in-out infinite !important;
}

.dr-racer.is-crying {
    z-index: 10;
    filter: drop-shadow(0 6px 5px rgba(21, 92, 142, 0.4));
}

.dr-racer.is-crying .dr-racer__beam {
    opacity: 0.22;
    filter: saturate(0.6);
}

.dr-racer.is-crying .dr-racer__image {
    width: 108%;
    height: auto;
    margin: -2% 0 0 -4%;
    object-fit: contain;
    animation: dr-crying-sob 980ms ease-in-out infinite !important;
}

.dr-racer.is-crying.is-recovering {
    z-index: 15;
    animation: dr-crying-recover 760ms cubic-bezier(.16, 1.2, .3, 1) both;
}

.dr-racer.is-crying.is-recovering .dr-racer__image {
    animation: none !important;
}

.dr-racer.is-petrified::after {
    content: "";
    position: absolute;
    inset: 4%;
    border: 2px solid rgba(170, 235, 255, 0.75);
    border-radius: 50%;
    box-shadow: inset 0 0 16px rgba(132, 222, 255, 0.54), 0 0 16px rgba(116, 215, 255, 0.6);
    animation: dr-statue-aura 1.1s ease-in-out infinite;
}

.dr-racer.is-petrified.is-skip-pulse {
    animation: dr-statue-skip-pulse 720ms ease-out both;
}

.dr-racer.is-petrified.is-skip-pulse::after {
    border-width: 4px;
    filter: brightness(1.55);
}

.dr-racer.is-reversed.is-stepping::after {
    right: auto;
    left: 55%;
    transform-origin: left center;
}

.dr-racer.is-petrify-impacting {
    z-index: 14;
    animation: dr-petrify-target-impact 1.25s cubic-bezier(.16, 1, .3, 1) both;
}

.dr-racer.is-reverse-impacting {
    z-index: 14;
    animation: dr-reverse-target-impact 1.25s cubic-bezier(.16, 1, .3, 1) both;
}

.dr-racer.is-shield-blocking {
    z-index: 16;
}

.dr-shield-block-impact {
    position: absolute;
    inset: -66%;
    z-index: 12;
    display: grid;
    place-items: center;
    pointer-events: none;
    animation: dr-shield-block-impact 1.45s cubic-bezier(.16, 1.1, .3, 1) both;
}

.dr-shield-block-impact i {
    position: absolute;
    inset: 7%;
    border: clamp(2px, 0.2vw, 4px) solid #d9ffff;
    border-radius: 50%;
    background:
        conic-gradient(from 0deg, transparent 0 7%, rgba(217, 255, 255, 0.96) 8% 10%, transparent 12% 24%, rgba(86, 225, 255, 0.9) 26% 29%, transparent 31% 100%),
        radial-gradient(circle, rgba(210, 253, 255, 0.5), rgba(39, 155, 236, 0.22) 48%, transparent 70%);
    box-shadow: 0 0 22px rgba(86, 229, 255, 0.98), inset 0 0 20px rgba(224, 255, 255, 0.86);
    animation: dr-shield-block-ring 720ms ease-out both;
}

.dr-shield-block-impact img {
    position: relative;
    z-index: 2;
    width: 46%;
    object-fit: contain;
    filter: drop-shadow(0 0 12px #d9ffff);
    animation: dr-shield-break 1.45s cubic-bezier(.2, .9, .25, 1) both;
}

.dr-shield-block-impact b {
    position: absolute;
    left: 50%;
    bottom: -1%;
    z-index: 4;
    padding: 4% 9%;
    transform: translateX(-50%);
    color: #f3ffff;
    font-size: clamp(7px, 0.6vw, 13px);
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
    background: linear-gradient(145deg, #32ccef, #1564b9);
    border: 2px solid #dcffff;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(16, 72, 137, 0.46), 0 0 12px rgba(83, 225, 255, 0.92);
}

.dr-racer__badge {
    display: none;
}

.dr-racer:not(.is-child):not(.is-active) .dr-racer__badge {
    opacity: 0;
}

@keyframes dr-racer-bob {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-5%) rotate(1deg); }
}

@keyframes dr-racer-beam {
    0%, 100% { opacity: 0.58; transform: translateX(-50%) scaleY(0.98); }
    50% { opacity: 0.82; transform: translateX(-50%) scaleY(1.02); }
}

@keyframes dr-racer-beam-streaks {
    0% { background-position: 24% 150%, 72% 125%; }
    100% { background-position: 24% -55%, 72% -38%; }
}

@keyframes dr-lap-two-spin {
    to { transform: rotate(1turn); }
}

@keyframes dr-lap-two-pulse {
    0%, 100% { opacity: 0.48; transform: scale(0.88); }
    50% { opacity: 1; transform: scale(1.06); }
}

@keyframes dr-statue-freeze {
    0%, 100% { transform: translateY(0); filter: brightness(0.94); }
    50% { transform: translateY(-1.5%); filter: brightness(1.12); }
}

@keyframes dr-statue-aura {
    0%, 100% { opacity: 0.55; scale: 0.92; }
    50% { opacity: 1; scale: 1.05; }
}

@keyframes dr-statue-skip-pulse {
    0% { scale: 1; filter: brightness(1); }
    42% { scale: 1.12; filter: brightness(1.7) drop-shadow(0 0 16px rgba(177, 238, 255, 0.96)); }
    100% { scale: 1; filter: brightness(0.92); }
}

@keyframes dr-reverse-status-spin {
    to { rotate: -360deg; }
}

@keyframes dr-status-particles-pulse {
    from { opacity: 0.45; scale: 0.9; rotate: -4deg; }
    to { opacity: 1; scale: 1.08; rotate: 5deg; }
}

@keyframes dr-petrify-status-pulse {
    0%, 100% { opacity: 0.62; scale: 0.92; filter: brightness(0.96); }
    50% { opacity: 1; scale: 1.06; filter: brightness(1.28); }
}

@keyframes dr-petrify-crystal-spin {
    to { rotate: 360deg; }
}

@keyframes dr-petrify-target-impact {
    0% { scale: 1; rotate: 0deg; filter: brightness(1); }
    24% { scale: 1.34; rotate: -4deg; filter: brightness(2.4) drop-shadow(0 0 24px #d9f8ff); }
    44% { scale: 0.9; rotate: 3deg; }
    68% { scale: 1.15; rotate: -1deg; filter: brightness(1.45) drop-shadow(0 0 18px #73d8ff); }
    100% { scale: 1; rotate: 0deg; filter: brightness(1); }
}

@keyframes dr-reverse-target-impact {
    0% { scale: 1; rotate: 0deg; filter: brightness(1); }
    28% { scale: 1.28; rotate: -24deg; filter: brightness(1.85) drop-shadow(0 0 24px #d284ff); }
    52% { scale: 0.92; rotate: 18deg; }
    74% { scale: 1.12; rotate: -8deg; filter: brightness(1.42) drop-shadow(0 0 18px #b14fe4); }
    100% { scale: 1; rotate: 0deg; filter: brightness(1); }
}

@keyframes dr-racer-dash {
    0% { transform: translateX(-38%) scale(0.78) rotate(-8deg); filter: brightness(1.65); }
    38% { transform: translateX(8%) scale(1.18) rotate(5deg); }
    72% { transform: translateX(-3%) scale(0.97) rotate(-1deg); }
    100% { transform: translateX(0) scale(1) rotate(0); filter: brightness(1); }
}

@keyframes dr-racer-step {
    0% { transform: translateY(0) rotate(-2deg) scale(0.96); }
    40% { transform: translateY(-13%) rotate(3deg) scale(1.08); filter: brightness(1.22); }
    78% { transform: translateY(2%) rotate(-1deg) scale(1.01); }
    100% { transform: translateY(0) rotate(0) scale(1); filter: brightness(1); }
}

@keyframes dr-racer-trail {
    0% { opacity: 0; transform: scaleX(0.15); }
    32% { opacity: 0.95; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.45); }
}

@keyframes dr-pulse {
    0%, 100% { opacity: 0.55; scale: 0.84; }
    50% { opacity: 1; scale: 1.18; }
}

.dr-event-banner {
    position: absolute;
    left: 50%;
    top: 51%;
    z-index: 15;
    padding: 0.7% 2.4%;
    transform: translate(-50%, -50%);
    color: #65340b;
    font-size: clamp(17px, 1.65vw, 34px);
    font-weight: 800;
    text-align: center;
    background: rgba(255, 248, 213, 0.96);
    border: clamp(2px, 0.2vw, 5px) solid #f0bd48;
    border-radius: 999px;
    box-shadow: 0 8px 0 rgba(136, 73, 10, 0.32), 0 20px 44px rgba(33, 81, 119, 0.3);
    animation: dr-event-in 1.35s ease both;
}

@keyframes dr-event-in {
    0% { opacity: 0; scale: 0.55; }
    22%, 75% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 1.08; }
}

.dr-roll-reveal {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 24;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 0.8vw;
    min-width: 16%;
    padding: 0.7% 1.4%;
    transform: translate(-50%, -50%);
    color: #fff9dc;
    text-align: center;
    background:
        radial-gradient(circle at 50% 48%, rgba(39, 210, 249, 0.92), rgba(20, 91, 165, 0.94) 66%),
        #1765a6;
    border: clamp(3px, 0.22vw, 5px) solid #fff0a0;
    border-radius: clamp(22px, 2vw, 42px);
    box-shadow:
        0 0 0 clamp(4px, 0.34vw, 7px) rgba(44, 178, 231, 0.35),
        0 0 55px rgba(93, 225, 255, 0.88),
        0 12px 0 rgba(20, 75, 131, 0.38);
    animation: dr-roll-reveal 1.05s cubic-bezier(.16, 1, .3, 1) both;
}

.dr-roll-reveal span {
    grid-column: 1 / -1;
    color: #d9f8ff;
    font-size: clamp(10px, 0.82vw, 17px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dr-roll-reveal img {
    width: clamp(70px, 7vw, 140px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 9px 8px rgba(20, 42, 76, 0.35));
}

.dr-roll-reveal strong {
    min-width: 1em;
    color: white;
    font-size: clamp(52px, 6vw, 120px);
    line-height: 0.9;
    text-shadow: 0 5px 0 #b6650a, 0 12px 22px rgba(23, 51, 89, 0.4);
}

@keyframes dr-roll-reveal {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35) rotate(-8deg); }
    32% { opacity: 1; transform: translate(-50%, -50%) scale(1.1) rotate(2deg); }
    70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -54%) scale(1.08); }
}

.dr-event-fx {
    position: absolute;
    inset: 0;
    z-index: 28;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.3vw;
    pointer-events: none;
    overflow: hidden;
    color: white;
    background: radial-gradient(circle, rgba(54, 213, 247, 0.24), rgba(11, 59, 116, 0.76));
    backdrop-filter: blur(3px);
    animation: dr-event-fx-in 2.45s ease both;
}

.dr-event-fx::before,
.dr-event-fx::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 42%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: clamp(3px, 0.3vw, 7px) solid rgba(255, 255, 255, 0.68);
    border-radius: 50%;
    animation: dr-event-ring 1.7s ease-out both;
}

.dr-event-fx::after {
    animation-delay: 180ms;
}

.dr-event-fx > img {
    position: relative;
    z-index: 3;
    width: clamp(180px, 19vw, 380px);
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 18px 20px rgba(9, 42, 84, 0.42));
    animation: dr-event-icon 2.45s cubic-bezier(.16, 1, .3, 1) both;
}

.dr-event-fx__copy {
    position: relative;
    z-index: 3;
    max-width: 42%;
    padding: 1.35% 1.8%;
    text-align: left;
    background: rgba(11, 65, 119, 0.58);
    border: clamp(2px, 0.18vw, 4px) solid rgba(255, 244, 173, 0.88);
    border-radius: clamp(20px, 1.8vw, 38px);
    box-shadow: 0 9px 0 rgba(18, 66, 112, 0.38), 0 20px 48px rgba(9, 42, 80, 0.34);
    text-shadow: 0 5px 0 rgba(95, 49, 5, 0.48), 0 12px 30px rgba(7, 41, 81, 0.48);
}

.dr-event-fx__identity {
    display: flex;
    align-items: center;
    gap: clamp(8px, 0.7vw, 15px);
    margin-bottom: 0.28em;
}

.dr-event-fx__avatar {
    display: none;
    width: clamp(44px, 4.4vw, 88px);
    aspect-ratio: 1;
    object-fit: cover;
    background: #fff6d0;
    border: clamp(2px, 0.2vw, 4px) solid #fff0a3;
    border-radius: 50%;
    box-shadow:
        0 0 0 clamp(3px, 0.25vw, 5px) rgba(38, 126, 192, 0.55),
        0 8px 16px rgba(8, 37, 72, 0.42);
}

.dr-event-fx.has-racer-avatar .dr-event-fx__avatar:not([hidden]) {
    display: block;
    animation: dr-skill-avatar-enter 620ms cubic-bezier(.16, 1.3, .3, 1) both;
}

.dr-event-fx__copy p {
    margin: 0;
    color: #fff0a9;
    font-size: clamp(14px, 1.25vw, 25px);
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dr-event-fx__copy strong {
    display: block;
    font-size: clamp(34px, 4vw, 80px);
    line-height: 0.95;
}

.dr-event-fx__copy span {
    display: block;
    margin-top: 0.35em;
    font-size: clamp(18px, 1.75vw, 35px);
    font-weight: 800;
}

.dr-event-fx[data-event="tailwind"] {
    background:
        linear-gradient(100deg, rgba(20, 96, 175, 0.48), rgba(45, 221, 248, 0.66), rgba(11, 58, 117, 0.6));
}

.dr-event-fx[data-event="sticky_cloud"] {
    background:
        radial-gradient(circle, rgba(181, 87, 224, 0.5), rgba(47, 18, 82, 0.83));
}

.dr-event-fx[data-event="mystery_star"] {
    background:
        radial-gradient(circle, rgba(255, 229, 89, 0.5), rgba(19, 117, 178, 0.78) 55%, rgba(20, 53, 111, 0.82));
}

.dr-event-fx[data-event="puddle"] {
    background:
        radial-gradient(circle at 32% 50%, rgba(218, 252, 255, 0.92), rgba(47, 185, 234, 0.8) 42%, rgba(12, 73, 148, 0.9));
    border-color: #cafaff;
}

.dr-event-fx[data-event="puddle"] > img {
    width: 29%;
    animation: dr-puddle-cry-in 2.45s cubic-bezier(.16, 1.18, .3, 1) both;
}

.dr-event-fx[data-event="skill-petrify"] {
    background: radial-gradient(circle at 30% 50%, rgba(220, 249, 255, 0.98), rgba(73, 142, 184, 0.95) 48%, rgba(16, 42, 77, 0.96));
    border-color: #d6f8ff;
}

.dr-event-fx[data-event="skill-reverse"] {
    background: radial-gradient(circle at 30% 50%, rgba(255, 234, 157, 0.98), rgba(153, 55, 208, 0.94) 48%, rgba(43, 17, 82, 0.97));
    border-color: #f3c7ff;
}

.dr-event-fx[data-event="skill-shield"] {
    background:
        radial-gradient(circle at 30% 50%, rgba(229, 255, 255, 0.98), rgba(45, 199, 242, 0.94) 45%, rgba(13, 67, 151, 0.97));
    border-color: #d5ffff;
}

.dr-event-fx[data-event="skill-petrify"] > img {
    width: 30%;
}

.dr-event-fx[data-event="skill-reverse"] > img {
    width: 19%;
    animation: dr-reverse-die-spin 1.1s cubic-bezier(.22, .8, .35, 1) infinite;
}

.dr-event-fx[data-event="skill-shield"] > img {
    width: 20%;
    filter: drop-shadow(0 0 22px rgba(210, 255, 255, 0.98));
    animation: dr-shield-popup 1.2s ease-in-out infinite;
}

.dr-skill-petrify-flash::after,
.dr-skill-reverse-flash::after,
.dr-skill-shield-flash::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 17;
    pointer-events: none;
    animation: dr-skill-screen-flash 850ms ease-out both;
}

.dr-skill-petrify-flash::after {
    background: radial-gradient(circle, rgba(224, 251, 255, 0.68), rgba(91, 189, 239, 0.16) 60%, transparent);
}

.dr-skill-reverse-flash::after {
    background: radial-gradient(circle, rgba(226, 157, 255, 0.62), rgba(102, 35, 160, 0.16) 60%, transparent);
}

.dr-skill-shield-flash::after {
    background:
        radial-gradient(circle, rgba(218, 255, 255, 0.74), rgba(49, 203, 246, 0.22) 58%, transparent);
}

@keyframes dr-reverse-die-spin {
    0% { rotate: 0deg; scale: 0.82; }
    55% { rotate: -230deg; scale: 1.16; }
    100% { rotate: -360deg; scale: 0.82; }
}

@keyframes dr-skill-screen-flash {
    0% { opacity: 0; }
    24% { opacity: 1; }
    100% { opacity: 0; }
}

.dr-event-fx__streaks {
    position: absolute;
    inset: -20%;
    opacity: 0.9;
    background:
        repeating-linear-gradient(102deg, transparent 0 8%, rgba(255, 255, 255, 0.5) 8.2% 8.6%, transparent 8.9% 15%);
    transform: translateX(-35%);
    animation: dr-event-streaks 1s linear infinite;
}

.dr-event-fx[data-event="sticky_cloud"] .dr-event-fx__streaks {
    background:
        radial-gradient(circle at 15% 20%, rgba(234, 159, 255, 0.8) 0 1.4%, transparent 1.8%),
        radial-gradient(circle at 80% 30%, rgba(169, 76, 223, 0.8) 0 2%, transparent 2.4%),
        radial-gradient(circle at 45% 80%, rgba(242, 179, 255, 0.7) 0 1.8%, transparent 2.2%);
    transform: none;
    animation: dr-cloud-bubbles 1.4s ease-in-out infinite;
}

.dr-event-fx[data-event="mystery_star"] .dr-event-fx__streaks {
    background:
        conic-gradient(from 0deg at 50% 50%, transparent, rgba(255, 242, 137, 0.82), transparent 9%, transparent 17%, rgba(103, 231, 255, 0.72), transparent 25%);
    transform: none;
    animation: dr-star-rays 3s linear infinite;
}

.dr-event-fx[data-event="puddle"] .dr-event-fx__streaks {
    background:
        radial-gradient(ellipse at 18% 62%, rgba(220, 253, 255, 0.94) 0 1.1%, transparent 1.5%),
        radial-gradient(ellipse at 68% 27%, rgba(137, 235, 255, 0.88) 0 1.4%, transparent 1.8%),
        radial-gradient(ellipse at 82% 72%, rgba(223, 253, 255, 0.84) 0 1.2%, transparent 1.7%);
    transform: none;
    animation: dr-puddle-drops 1.15s ease-in-out infinite;
}

.dr-stage.dr-event-shake {
    animation: dr-stage-shake 620ms cubic-bezier(.36, .07, .19, .97);
}

.dr-stage.dr-puddle-wobble {
    animation: dr-stage-puddle-wobble 720ms cubic-bezier(.36, .07, .19, .97);
}

@keyframes dr-event-fx-in {
    0% { opacity: 0; }
    16%, 76% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes dr-event-icon {
    0% { opacity: 0; transform: scale(0.25) rotate(-22deg); }
    24% { opacity: 1; transform: scale(1.18) rotate(5deg); }
    70% { transform: scale(1) rotate(0); }
    100% { opacity: 0; transform: scale(1.12); }
}

@keyframes dr-skill-avatar-enter {
    0% { opacity: 0; transform: scale(0.3) rotate(-12deg); }
    68% { opacity: 1; transform: scale(1.12) rotate(3deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes dr-event-ring {
    0% { opacity: 0.9; scale: 0.15; }
    100% { opacity: 0; scale: 1.7; }
}

@keyframes dr-event-streaks {
    to { transform: translateX(35%); }
}

@keyframes dr-cloud-bubbles {
    50% { opacity: 0.55; scale: 1.08; }
}

@keyframes dr-star-rays {
    to { rotate: 360deg; }
}

@keyframes dr-stage-shake {
    0%, 100% { translate: 0 0; }
    16% { translate: -0.55% 0.3%; }
    32% { translate: 0.5% -0.25%; }
    48% { translate: -0.4% 0.2%; }
    64% { translate: 0.32% -0.15%; }
    80% { translate: -0.18% 0.1%; }
}

.dr-dice-console {
    position: absolute;
    left: 50%;
    top: 51%;
    z-index: 14;
    display: grid;
    justify-items: center;
    align-items: center;
    gap: 0;
    width: clamp(118px, 10vw, 195px);
    padding: 0;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    pointer-events: none;
    transition:
        opacity 220ms ease,
        transform 260ms cubic-bezier(.22, .8, .3, 1),
        width 240ms cubic-bezier(.22, .8, .3, 1),
        visibility 0s linear 260ms;
}

#dr-race::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 45;
    background: rgba(3, 15, 35, 0.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.dr-app.is-dice-ritual-focus #dr-race::after {
    opacity: 1;
}

.dr-app.is-dice-ritual-focus .dr-dice-console {
    z-index: 46;
    width: clamp(158px, 13.4vw, 258px);
    filter: drop-shadow(0 0 30px rgba(255, 224, 112, 0.56));
}

.dr-dice-console.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -44%) scale(.82);
    pointer-events: none;
}

.dr-auto-roll-timer {
    position: absolute;
    right: -28%;
    top: -12%;
    z-index: 12;
    display: grid;
    min-width: clamp(48px, 4.6vw, 84px);
    aspect-ratio: 1;
    padding: 9%;
    place-items: center;
    align-content: center;
    color: #fff8d7;
    background: radial-gradient(circle at 35% 25%, #277fd1, #123e7a 72%);
    border: clamp(2px, 0.16vw, 4px) solid #ffd45d;
    border-radius: 50%;
    box-shadow:
        0 4px 0 #8c4b11,
        0 0 18px rgba(255, 220, 86, 0.72);
    pointer-events: none;
}

.dr-auto-roll-timer[hidden] {
    display: none;
}

.dr-auto-roll-timer b {
    font-size: clamp(20px, 2vw, 38px);
    line-height: 0.85;
}

.dr-auto-roll-timer small {
    margin-top: 0.25em;
    font-size: clamp(6px, 0.5vw, 10px);
    font-weight: 900;
    line-height: 1;
    text-align: center;
}

.dr-auto-roll-timer.is-urgent {
    background: radial-gradient(circle at 35% 25%, #ff9d35, #bc471a 74%);
    animation: dr-auto-roll-pulse 420ms ease-in-out infinite alternate;
}

.dr-auto-roll-timer.is-auto {
    right: -48%;
    min-width: clamp(68px, 6.3vw, 118px);
    color: #5f2e09;
    background: radial-gradient(circle at 35% 25%, #fffbd2, #ffc745 72%);
    animation: dr-auto-roll-pop 520ms cubic-bezier(.16, 1.32, .3, 1) both;
}

@keyframes dr-auto-roll-pulse {
    to { scale: 1.1; filter: brightness(1.18); }
}

@keyframes dr-auto-roll-pop {
    0% { opacity: 0; scale: 0.4; }
    58% { opacity: 1; scale: 1.16; }
    100% { opacity: 1; scale: 1; }
}

.dr-reactions {
    position: absolute;
    inset: 0;
    z-index: 16;
    pointer-events: none;
}

.dr-reaction-bursts {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.dr-reaction-tray {
    position: absolute;
    right: 1.35%;
    top: 9.5%;
    display: grid;
    grid-template-columns: repeat(3, clamp(36px, 3.05vw, 56px));
    grid-auto-rows: clamp(36px, 3.05vw, 56px);
    gap: clamp(4px, 0.42vw, 8px);
    padding: clamp(6px, 0.55vw, 11px);
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(7, 34, 72, 0.86), rgba(3, 21, 50, 0.82));
    border: clamp(1px, 0.12vw, 3px) solid rgba(255, 229, 131, 0.58);
    border-radius: clamp(18px, 1.45vw, 28px);
    box-shadow: 0 12px 28px rgba(8, 30, 64, 0.32), 0 0 24px rgba(90, 205, 255, 0.16);
    backdrop-filter: blur(7px);
}

.dr-reaction-tray button {
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    padding: 9%;
    place-items: center;
    background: rgba(255, 250, 222, 0.94);
    border: 1px solid rgba(255, 220, 102, 0.92);
    border-radius: 31%;
    box-shadow: 0 3px 0 rgba(104, 63, 14, 0.26);
    transition: transform 160ms ease, filter 160ms ease, opacity 160ms ease;
}

.dr-reaction-tray button:hover:not(:disabled),
.dr-reaction-tray button:focus-visible:not(:disabled) {
    transform: translateY(-8%) scale(1.08);
    filter: brightness(1.08);
}

.dr-reaction-tray button:active:not(:disabled) {
    transform: translateY(2%) scale(0.94);
}

.dr-reaction-tray button:disabled {
    opacity: 0.38;
    filter: grayscale(0.82);
}

.dr-reaction-tray img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.dr-reaction-burst {
    position: absolute;
    left: var(--reaction-x);
    top: var(--reaction-y);
    z-index: 2;
    display: grid;
    width: clamp(62px, 7.2vw, 124px);
    place-items: center;
    transform: translate(-50%, -50%);
    animation: dr-reaction-rise 2.05s cubic-bezier(.15, 1.1, .24, 1) both;
}

.dr-reaction-burst img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    filter: drop-shadow(0 16px 16px rgba(19, 43, 75, 0.46)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.38));
}

.dr-reaction-burst strong {
    position: absolute;
    left: 50%;
    bottom: -8%;
    padding: 6% 16% 7%;
    transform: translateX(-50%);
    color: #62320b;
    font-size: clamp(12px, 1.18vw, 22px);
    font-weight: 900;
    white-space: nowrap;
    background: linear-gradient(180deg, rgba(255, 247, 173, 0.98), rgba(250, 204, 21, 0.94));
    border: 2px solid rgba(255, 247, 173, 0.72);
    border-radius: 999px;
    box-shadow: 0 10px 24px rgba(32, 43, 75, 0.36), 0 0 20px rgba(250, 204, 21, 0.34);
}

.dr-reaction-burst--child strong {
    color: #0f568d;
    border-color: #76dff4;
}

@keyframes dr-reaction-rise {
    0% {
        opacity: 0;
        transform: translate(-50%, 12%) rotate(var(--reaction-tilt)) scale(0.35);
    }
    18% {
        opacity: 1;
        transform: translate(-50%, -18%) rotate(0) scale(1.1);
    }
    70% {
        opacity: 1;
        transform: translate(-50%, -72%) rotate(0deg) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -135%) rotate(var(--reaction-tilt)) scale(1.12);
    }
}

.dr-skill-dock {
    position: absolute;
    left: 1.15%;
    bottom: 1.55%;
    z-index: 30;
    display: flex;
    width: auto;
    min-width: clamp(94px, 7.5vw, 144px);
    min-height: clamp(86px, 7vw, 134px);
    padding: clamp(10px, 0.72vw, 14px) clamp(7px, 0.55vw, 11px) clamp(7px, 0.55vw, 11px);
    color: #fff4bd;
    background:
        radial-gradient(circle at 50% 8%, rgba(100, 218, 255, 0.26), transparent 48%),
        linear-gradient(155deg, rgba(29, 104, 165, 0.98), rgba(7, 45, 96, 0.98) 68%);
    border: clamp(2px, 0.15vw, 4px) solid #f0c65c;
    border-radius: clamp(14px, 1.05vw, 21px);
    box-shadow:
        0 5px 0 rgba(76, 39, 6, 0.75),
        0 12px 24px rgba(10, 39, 74, 0.34),
        inset 0 0 0 2px rgba(143, 230, 255, 0.18);
    isolation: isolate;
}

.dr-skill-dock:not(.has-skill) {
    display: none;
}

.dr-skill-dock::before,
.dr-skill-dock::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.dr-skill-dock::before {
    inset: 5px;
    border: 1px solid rgba(255, 238, 159, 0.38);
    border-radius: clamp(10px, 0.78vw, 16px);
}

.dr-skill-dock::after {
    left: 50%;
    bottom: -7px;
    width: 28%;
    height: 13px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, #a86512, #ffe580 48%, #9b5b0c);
    clip-path: polygon(0 0, 100% 0, 72% 100%, 28% 100%);
}

.dr-skill-dock.is-ready {
    box-shadow:
        0 5px 0 rgba(76, 39, 6, 0.75),
        0 12px 24px rgba(10, 39, 74, 0.34),
        inset 0 0 0 2px rgba(143, 230, 255, 0.2),
        0 0 0 3px rgba(255, 235, 125, 0.38),
        0 0 26px rgba(255, 214, 67, 0.68);
}

.dr-skill-dock__label {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 6;
    display: flex;
    min-width: 68%;
    padding: 2px 10px 3px;
    align-items: center;
    justify-content: center;
    gap: 0.25em;
    transform: translate(-50%, -52%);
    color: #fff4b2;
    font-size: clamp(7px, 0.56vw, 11px);
    font-weight: 900;
    letter-spacing: 0.08em;
    white-space: nowrap;
    background: linear-gradient(180deg, #2779b0, #0d497f);
    border: 2px solid #f0c65c;
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(79, 40, 5, 0.72);
}

.dr-skill-dock__label i {
    color: #8cecff;
    font-style: normal;
    text-shadow: 0 0 8px rgba(110, 232, 255, 0.92);
}

.dr-skill-dock__label b {
    font: inherit;
}

.dr-skill-buttons {
    display: block;
    width: 100%;
}

.dr-skill-slots {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(5px, 0.42vw, 9px);
}

.dr-skill-empty {
    display: block;
    color: #92714a;
    font-size: clamp(8px, 0.68vw, 14px);
    font-weight: 700;
    line-height: 1.15;
}

.dr-skill-button {
    position: relative;
    display: grid;
    width: clamp(82px, 6.55vw, 126px);
    min-width: clamp(82px, 6.55vw, 126px);
    aspect-ratio: 0.96;
    padding: 6% 6% 7%;
    place-items: center;
    align-content: center;
    gap: 2%;
    overflow: visible;
    color: #fff5bc;
    text-align: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(117, 226, 255, 0.28), transparent 45%),
        linear-gradient(180deg, rgba(39, 122, 181, 0.96), rgba(11, 59, 112, 0.98));
    border: clamp(2px, 0.13vw, 3px) solid #f2cf6b;
    border-radius: clamp(12px, 0.9vw, 18px);
    box-shadow:
        0 4px 0 rgba(76, 40, 7, 0.74),
        inset 0 0 18px rgba(91, 214, 255, 0.18);
    transition: transform 160ms ease, filter 160ms ease;
}

.dr-skill-button__icon {
    position: relative;
    display: grid;
    width: 62%;
    aspect-ratio: 1;
    place-items: center;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(255, 250, 205, 0.96) 0 12%, rgba(98, 217, 244, 0.42) 48%, rgba(19, 74, 133, 0.26) 70%);
    border: 2px solid rgba(255, 231, 133, 0.92);
    box-shadow:
        inset 0 0 12px rgba(255, 255, 255, 0.64),
        0 0 14px rgba(95, 224, 255, 0.54);
}

.dr-skill-button__icon i {
    position: absolute;
    inset: -16%;
    border: 2px solid rgba(112, 225, 250, 0.62);
    border-radius: 50%;
    border-style: dashed;
    animation: dr-skill-rune-spin 6s linear infinite;
}

.dr-skill-button__icon b {
    position: absolute;
    right: -18%;
    top: -18%;
    display: grid;
    width: 34%;
    aspect-ratio: 1;
    place-items: center;
    color: #64310a;
    font-size: clamp(8px, 0.62vw, 12px);
    background: linear-gradient(180deg, #fff7a8, #f5b834);
    border: 2px solid #fff6c1;
    border-radius: 50%;
    box-shadow: 0 2px 0 #8d4f0b;
}

.dr-skill-button__copy {
    display: grid;
    min-width: 0;
    line-height: 1;
}

.dr-skill-button__copy strong {
    overflow: hidden;
    font-size: clamp(9px, 0.72vw, 14px);
    font-weight: 900;
    text-overflow: ellipsis;
    text-shadow: 0 2px 0 rgba(73, 34, 5, 0.72);
    white-space: nowrap;
}

.dr-skill-button__copy small {
    margin-top: 0.35em;
    color: #aef0ff;
    font-size: clamp(6px, 0.45vw, 9px);
    font-weight: 900;
    letter-spacing: 0.045em;
    white-space: nowrap;
}

.dr-passive-skill {
    position: relative;
    display: grid;
    width: clamp(54px, 4.2vw, 80px);
    padding: 7% 5% 8%;
    place-items: center;
    color: #e5faff;
    text-align: center;
    background:
        radial-gradient(circle at 50% 32%, rgba(121, 236, 255, 0.28), transparent 48%),
        linear-gradient(180deg, rgba(29, 118, 171, 0.94), rgba(9, 54, 104, 0.96));
    border: 2px solid #86e7f8;
    border-radius: clamp(12px, 0.9vw, 18px);
    box-shadow: 0 4px 0 rgba(40, 69, 98, 0.7), 0 0 15px rgba(89, 224, 249, 0.42);
}

.dr-passive-skill__icon {
    position: relative;
    display: grid;
    width: 72%;
    aspect-ratio: 1;
    place-items: center;
}

.dr-passive-skill__icon i {
    position: absolute;
    inset: -13%;
    border: 2px solid rgba(119, 233, 255, 0.76);
    border-radius: 50%;
    box-shadow: inset 0 0 12px rgba(99, 224, 248, 0.42), 0 0 12px rgba(99, 224, 248, 0.46);
    animation: dr-passive-shield-ring 1.6s ease-in-out infinite;
}

.dr-passive-skill__icon img {
    position: relative;
    z-index: 2;
    width: 88%;
    height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(116, 230, 255, 0.9));
}

.dr-passive-skill strong,
.dr-passive-skill small {
    display: block;
    line-height: 1;
}

.dr-passive-skill strong {
    margin-top: 7%;
    font-size: clamp(8px, 0.58vw, 11px);
    font-weight: 900;
}

.dr-passive-skill small {
    margin-top: 0.35em;
    color: #91e9f9;
    font-size: clamp(5px, 0.4vw, 8px);
    font-weight: 900;
    white-space: nowrap;
}

.dr-skill-button:not(:disabled) {
    cursor: pointer;
    animation: dr-skill-button-ready 1.5s ease-in-out infinite;
}

.dr-skill-button:not(:disabled):active {
    transform: translateY(3px) scale(0.97);
    filter: brightness(1.16);
}

.dr-skill-button:disabled {
    opacity: 0.64;
    filter: saturate(0.66);
}

.dr-skill-button img {
    position: relative;
    z-index: 2;
    width: 86%;
    height: 86%;
    object-fit: contain;
    filter: drop-shadow(0 0 7px rgba(255, 239, 144, 0.7));
}

@keyframes dr-skill-rune-spin {
    to { transform: rotate(360deg); }
}

@keyframes dr-passive-shield-ring {
    50% { opacity: 0.58; transform: scale(1.11); }
}

@keyframes dr-skill-button-ready {
    0%, 100% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-2px); filter: brightness(1.1); }
}

.dr-dice-stage {
    position: relative;
    display: block;
    width: clamp(118px, 10vw, 195px);
    aspect-ratio: 1;
    filter: drop-shadow(0 16px 14px rgba(38, 62, 93, 0.34));
    transform-origin: 50% 72%;
    transition: filter 220ms ease, transform 220ms ease, width 240ms cubic-bezier(.22, .8, .3, 1);
}

.dr-app.is-dice-ritual-focus .dr-dice-stage {
    width: clamp(158px, 13.4vw, 258px);
}

.dr-dice-cup-sprite {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    background-image: url("../shared/img/assets_taks/dragon-race/dice-ritual/sheet-transparent.png");
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 200% 400%;
    filter: drop-shadow(0 8px 7px rgba(96, 50, 8, 0.34));
}

.dr-die {
    position: absolute;
    left: 50%;
    top: 68%;
    z-index: 5;
    width: 39%;
    aspect-ratio: 1;
    object-fit: contain;
    opacity: 0;
    transform: translate(-50%, -85%) rotate(-80deg) scale(0.25);
    filter: drop-shadow(0 9px 7px rgba(96, 50, 8, 0.42)) drop-shadow(0 0 8px rgba(255, 239, 151, 0.6));
    transition: width 220ms ease;
}

.dr-app.is-dice-ritual-focus .dr-die {
    width: 44%;
}

.dr-dice-stage__spark {
    position: absolute;
    left: 50%;
    top: 69%;
    z-index: 1;
    display: block;
    width: 112%;
    aspect-ratio: 1;
    opacity: 0;
    transform: translate(-50%, -50%);
    background: url("../shared/img/assets_taks/dragon-race/fx/event-burst.webp") center / contain no-repeat;
}

.dr-dice-stage.is-shaking {
    animation: dr-cup-ritual-lift 1.55s cubic-bezier(.2, .72, .26, 1) both;
}

.dr-dice-stage.is-pouring {
    transform: translateY(-8%) scale(1.12);
    filter: drop-shadow(0 22px 18px rgba(38, 62, 93, 0.42)) drop-shadow(0 0 18px rgba(255, 227, 112, 0.52));
}

.dr-dice-stage.is-tumbling .dr-die {
    opacity: 1;
    animation: dr-die-tumble 1.08s cubic-bezier(.18, .76, .24, 1) both;
}

.dr-dice-stage.is-revealed .dr-die {
    opacity: 1;
    animation: dr-die-reveal 1.3s cubic-bezier(.14, 1.45, .24, 1) both;
}

.dr-dice-stage.is-auto-result .dr-dice-cup-sprite {
    visibility: hidden;
    animation: none !important;
}

.dr-dice-stage.is-auto-result .dr-die {
    top: 50%;
    opacity: 1;
    animation: dr-auto-die-result 1.05s cubic-bezier(.16, 1.28, .28, 1) both;
}

.dr-dice-stage.is-auto-result .dr-dice-stage__spark {
    animation: dr-dice-spark 1.05s ease both;
}

.dr-dice-stage.is-tumbling .dr-dice-stage__spark,
.dr-dice-stage.is-revealed .dr-dice-stage__spark {
    animation: dr-dice-spark 1.15s ease both;
}

@keyframes dr-cup-ritual-lift {
    0% { transform: translateY(0) scale(1); filter: brightness(1); }
    18% { transform: translateY(-13%) scale(1.08); filter: brightness(1.14); }
    42% { transform: translate(-3%, -18%) scale(1.12); }
    62% { transform: translate(4%, -20%) scale(1.15); filter: brightness(1.25); }
    82% { transform: translate(-2%, -18%) scale(1.13); }
    100% { transform: translateY(-12%) scale(1.1); filter: brightness(1.12); }
}

@keyframes dr-die-tumble {
    0% { opacity: 0; transform: translate(-50%, -115%) rotate(-140deg) scale(0.2); }
    18% { opacity: 1; transform: translate(-24%, -62%) rotate(75deg) scale(0.72); }
    48% { transform: translate(-72%, 2%) rotate(250deg) scale(1.02); }
    72% { transform: translate(-32%, 22%) rotate(430deg) scale(0.88); }
    100% { opacity: 1; transform: translate(-50%, 8%) rotate(620deg) scale(1.08); }
}

@keyframes dr-die-reveal {
    0% { opacity: 1; transform: translate(-50%, 8%) rotate(620deg) scale(1.08); filter: brightness(1.8); }
    38% { transform: translate(-50%, -5%) rotate(690deg) scale(1.42); filter: brightness(1.45); }
    68% { transform: translate(-50%, 7%) rotate(720deg) scale(1.16); }
    100% { opacity: 1; transform: translate(-50%, 4%) rotate(720deg) scale(1.22); filter: brightness(1); }
}

@keyframes dr-auto-die-result {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) rotate(-10deg) scale(.35);
        filter: brightness(2);
    }
    48% {
        opacity: 1;
        transform: translate(-50%, -55%) rotate(4deg) scale(1.52);
        filter: brightness(1.45);
    }
    72% {
        transform: translate(-50%, -48%) rotate(-2deg) scale(1.18);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) rotate(0) scale(1.3);
        filter: brightness(1);
    }
}

@keyframes dr-dice-spark {
    0%, 12% { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-35deg); }
    48% { opacity: 1; transform: translate(-50%, -50%) scale(1.18) rotate(5deg); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.58) rotate(45deg); }
}

.dr-roll-button {
    position: relative;
    isolation: isolate;
    display: grid;
    justify-items: center;
    min-width: 0;
    padding: 0;
    pointer-events: auto;
    color: #fff8d7;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.dr-roll-button::before {
    content: "";
    position: absolute;
    inset: 7%;
    z-index: 0;
    border: clamp(3px, 0.24vw, 5px) solid transparent;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transform: scale(.76);
    background:
        radial-gradient(circle at 50% 42%, rgba(30, 139, 211, 0.96), rgba(5, 40, 91, 0.97) 64%, rgba(3, 24, 62, 0.98)) padding-box,
        linear-gradient(145deg, #fff5a7, #ffb51f 48%, #fff8c4) border-box;
    box-shadow:
        0 10px 22px rgba(0, 27, 72, 0.52),
        0 0 0 clamp(3px, 0.24vw, 5px) rgba(16, 210, 255, 0.34),
        0 0 28px rgba(30, 218, 255, 0.9),
        0 0 50px rgba(255, 196, 37, 0.7);
    transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(.2, .9, .3, 1);
}

.dr-roll-button > .dr-dice-stage {
    z-index: 2;
}

.dr-roll-button.is-child-turn {
    cursor: pointer;
}

.dr-roll-button.is-child-turn:not(.is-ritual-running)::before {
    opacity: 1;
    transform: scale(1);
    animation: dr-roll-ready-halo 1.7s ease-in-out infinite;
}

.dr-roll-button.is-child-turn .dr-dice-cup-sprite {
    animation: dr-cup-ready-shake 1.45s ease-in-out infinite;
}

.dr-roll-button.is-child-turn:hover .dr-dice-stage,
.dr-roll-button.is-child-turn:focus-visible .dr-dice-stage {
    filter: brightness(1.18) drop-shadow(0 0 24px rgba(255, 230, 112, 0.92));
    transform: translateY(-2%) scale(1.045);
}

.dr-roll-button.is-child-turn:hover::before,
.dr-roll-button.is-child-turn:focus-visible::before {
    filter: brightness(1.16);
    box-shadow:
        0 12px 24px rgba(0, 27, 72, 0.56),
        0 0 0 clamp(4px, 0.3vw, 6px) rgba(31, 226, 255, 0.46),
        0 0 36px rgba(30, 218, 255, 1),
        0 0 62px rgba(255, 199, 42, 0.86);
}

.dr-roll-button.is-child-turn:focus-visible {
    outline: clamp(3px, 0.22vw, 5px) solid #fffbd5;
    outline-offset: clamp(6px, 0.5vw, 10px);
}

.dr-roll-button.is-ritual-running .dr-dice-cup-sprite {
    animation: none;
}

.dr-roll-button:disabled {
    cursor: default;
    opacity: 1;
}

@keyframes dr-roll-ready-halo {
    0%, 100% {
        transform: scale(.96);
        filter: brightness(1);
    }
    50% {
        transform: scale(1.06);
        filter: brightness(1.15);
    }
}

@keyframes dr-cup-ready-shake {
    0%, 58%, 100% { transform: translateX(0) rotate(0deg); }
    64% { transform: translateX(-3.2%) rotate(-2.6deg); }
    70% { transform: translateX(3.1%) rotate(2.4deg); }
    76% { transform: translateX(-2.4%) rotate(-1.9deg); }
    82% { transform: translateX(2%) rotate(1.5deg); }
    88% { transform: translateX(-1.1%) rotate(-0.8deg); }
    94% { transform: translateX(0.7%) rotate(0.5deg); }
}

.dr-countdown {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    color: white;
    text-align: center;
    background: radial-gradient(circle, rgba(67, 210, 246, 0.2), rgba(18, 70, 125, 0.72));
    backdrop-filter: blur(5px);
}

.dr-countdown span {
    font-size: clamp(120px, 19vw, 360px);
    font-weight: 800;
    line-height: 0.8;
    text-shadow: 0 10px 0 #b96c12, 0 22px 55px rgba(0, 48, 95, 0.5);
    animation: dr-count 880ms ease both;
}

.dr-countdown.is-launch span {
    font-size: clamp(54px, 8vw, 154px);
    white-space: nowrap;
}

.dr-countdown small {
    position: absolute;
    top: 69%;
    font-size: clamp(20px, 2.2vw, 45px);
    font-weight: 800;
}

@keyframes dr-count {
    0% { opacity: 0; scale: 1.7; }
    25%, 72% { opacity: 1; scale: 1; }
    100% { opacity: 0; scale: 0.65; }
}

.dr-result-aura {
    position: absolute;
    left: 50%;
    top: 41%;
    z-index: 3;
    width: 34%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(255, 247, 137, 0.88), rgba(255, 201, 59, 0.19) 52%, transparent 70%);
    border-radius: 50%;
    animation: dr-result-glow 2s ease-in-out infinite;
}

@keyframes dr-result-glow {
    0%, 100% { opacity: 0.58; scale: 0.9; }
    50% { opacity: 1; scale: 1.08; }
}

.dr-result-firework {
    position: absolute;
    left: var(--firework-x);
    top: var(--firework-y);
    z-index: 7;
    width: 8px;
    aspect-ratio: 1;
    pointer-events: none;
}

.dr-result-firework::before {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow:
        0 0 12px 5px var(--firework-color),
        0 0 30px 10px color-mix(in srgb, var(--firework-color) 68%, transparent);
    animation: dr-result-firework-core 1.35s ease-out var(--firework-delay) both;
}

.dr-result-firework i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: clamp(3px, 0.32vw, 7px);
    height: clamp(10px, 1.1vw, 22px);
    transform-origin: 50% 0;
    border-radius: 999px;
    background: linear-gradient(to bottom, #fff, var(--firework-color) 48%, transparent);
    box-shadow: 0 0 8px var(--firework-color);
    animation: dr-result-firework-spark 1.45s cubic-bezier(.08, .72, .18, 1) var(--firework-delay) both;
}

@keyframes dr-result-firework-core {
    0%, 10% { opacity: 0; scale: 0.2; }
    22% { opacity: 1; scale: 1.25; }
    100% { opacity: 0; scale: 0.12; }
}

@keyframes dr-result-firework-spark {
    0%, 12% {
        opacity: 0;
        transform: rotate(var(--spark-angle)) translateY(0) scaleY(0.2);
    }
    24% { opacity: 1; }
    100% {
        opacity: 0;
        transform: rotate(var(--spark-angle)) translateY(var(--spark-distance)) scaleY(0.05);
    }
}

.dr-result-legend {
    position: absolute;
    left: 50%;
    top: 4.4%;
    z-index: 11;
    width: 60%;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.dr-result-legend .dr-eyebrow {
    margin: 0;
    color: #fff0a6;
    font-size: clamp(9px, 0.72vw, 15px);
    letter-spacing: 0.22em;
    text-shadow:
        0 2px 0 #8b4b08,
        0 0 13px rgba(255, 217, 92, 0.96),
        0 5px 18px rgba(53, 92, 127, 0.48);
}

.dr-result-legend h1 {
    margin: 0.02em 0 0;
    color: #fff7c7;
    font-size: clamp(27px, 2.65vw, 54px);
    line-height: 0.95;
    text-shadow:
        0 3px 0 #b5650a,
        0 6px 0 #6f3708,
        0 0 22px rgba(255, 235, 143, 0.92),
        0 12px 22px rgba(32, 68, 105, 0.4);
}

.dr-result-legend p:last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.7em;
    margin: 0.28em 0 0;
    color: #6d3908;
    font-size: clamp(10px, 0.82vw, 17px);
    font-weight: 1000;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 0 #fff3b7;
}

.dr-result-legend p:last-child::before,
.dr-result-legend p:last-child::after {
    content: "✦";
    color: #ffd04c;
    text-shadow: 0 1px 0 #874607, 0 0 12px #fff0a2;
}

.dr-result-reward {
    position: absolute;
    left: 50%;
    top: 17.5%;
    z-index: 10;
    display: grid;
    width: min(20%, 365px);
    place-items: center;
    transform: translateX(-50%);
    text-align: center;
    pointer-events: none;
}

.dr-result-reward[hidden] {
    display: none;
}

.dr-result-reward__rays,
.dr-result-reward__orbit {
    position: absolute;
    left: 50%;
    top: 34%;
    z-index: -2;
    width: 112%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}

.dr-result-reward__rays {
    background:
        repeating-conic-gradient(
            from 4deg,
            rgba(255, 244, 158, 0.78) 0 3deg,
            transparent 3deg 16deg
        );
    filter: blur(0.6px);
    opacity: 0.78;
    -webkit-mask: radial-gradient(circle, transparent 0 29%, #000 44% 70%, transparent 78%);
    mask: radial-gradient(circle, transparent 0 29%, #000 44% 70%, transparent 78%);
    animation: dr-reward-rays 13s linear infinite;
}

.dr-result-reward__orbit {
    width: 86%;
    border: clamp(1px, 0.11vw, 3px) solid rgba(255, 239, 137, 0.76);
    box-shadow:
        0 0 0 clamp(5px, 0.5vw, 10px) rgba(66, 224, 255, 0.14),
        0 0 32px rgba(255, 223, 93, 0.82),
        inset 0 0 28px rgba(94, 238, 255, 0.38);
    animation: dr-reward-orbit 3.2s ease-in-out infinite;
}

.dr-result-reward__visual {
    position: relative;
    display: grid;
    width: clamp(130px, 12.5vw, 245px);
    aspect-ratio: 1;
    place-items: center;
    animation: dr-reward-arrive 920ms cubic-bezier(.16, 1.28, .28, 1) both;
}

.dr-result-reward__visual img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter:
        drop-shadow(0 13px 11px rgba(58, 52, 21, 0.35))
        drop-shadow(0 0 16px rgba(108, 244, 255, 0.65));
    animation: dr-reward-float 2.8s ease-in-out 900ms infinite;
}

.dr-result-reward[data-kind="fragments"] .dr-result-reward__visual {
    width: clamp(110px, 9.5vw, 190px);
}

.dr-result-reward__visual > b {
    position: absolute;
    right: -12%;
    bottom: 13%;
    display: grid;
    min-width: clamp(38px, 3.4vw, 68px);
    aspect-ratio: 1;
    place-items: center;
    color: #fffbd9;
    font-size: clamp(18px, 1.65vw, 34px);
    line-height: 1;
    background: radial-gradient(circle at 34% 25%, #43dff0, #176fae 68%, #10477c);
    border: clamp(2px, 0.18vw, 4px) solid #ffe071;
    border-radius: 50%;
    box-shadow: 0 5px 0 #713f0b, 0 0 20px rgba(90, 236, 255, 0.86);
}

.dr-result-reward__plaque {
    display: grid;
    min-width: 118%;
    margin-top: -8%;
    padding: 3.8% 13% 4.4%;
    color: #fff6c8;
    background:
        radial-gradient(circle at 50% 0, rgba(96, 225, 255, 0.28), transparent 52%),
        linear-gradient(180deg, #2677af, #164d83 66%, #103560);
    border: clamp(1px, 0.12vw, 3px) solid #f2c755;
    border-radius: 999px;
    box-shadow:
        0 4px 0 #704009,
        0 8px 17px rgba(32, 55, 80, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.44);
}

.dr-result-reward__plaque strong {
    font-size: clamp(10px, 0.84vw, 17px);
    line-height: 1.05;
    letter-spacing: 0.04em;
}

.dr-result-reward__plaque small {
    margin-top: 0.16em;
    color: #a9efff;
    font-size: clamp(7px, 0.56vw, 11px);
    font-weight: 900;
    line-height: 1.05;
}

.dr-result-reward__progress {
    display: grid;
    grid-template-columns: auto minmax(70px, 1fr);
    align-items: center;
    gap: 0.48em;
    margin-top: 0.34em;
}

.dr-result-reward__progress[hidden] {
    display: none;
}

.dr-result-reward__progress span {
    color: #fff0a5;
    font-size: clamp(7px, 0.53vw, 11px);
    font-weight: 1000;
    white-space: nowrap;
}

.dr-result-reward__progress i {
    display: block;
    height: clamp(6px, 0.48vw, 10px);
    overflow: hidden;
    background: rgba(5, 31, 70, 0.72);
    border: 1px solid rgba(255, 235, 139, 0.68);
    border-radius: 999px;
    box-shadow: inset 0 2px 4px rgba(2, 16, 42, 0.46);
}

.dr-result-reward__progress i b {
    display: block;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #45def2, #a8fff3 62%, #fff2a2);
    border-radius: inherit;
    box-shadow: 0 0 10px rgba(112, 246, 255, 0.9);
    transition: width 700ms cubic-bezier(.16, 1, .3, 1);
}

.dr-podium {
    position: absolute;
    left: 50%;
    top: 48%;
    z-index: 7;
    display: block;
    width: 64%;
    height: 29%;
    transform: translate(-50%, -50%);
}

.dr-podium-racer {
    position: absolute;
    bottom: 0;
    width: 19%;
    text-align: center;
    animation: dr-podium-racer-in 740ms cubic-bezier(.16, 1.2, .3, 1) both;
}

.dr-podium-racer:nth-child(1) {
    left: 50%;
    z-index: 3;
    transform: translateX(-50%) translateY(-9%);
}

.dr-podium-racer:nth-child(2) {
    left: 20%;
    z-index: 2;
    transform: translateX(-50%) translateY(17%);
    animation-delay: 120ms;
}

.dr-podium-racer:nth-child(3) {
    left: 80%;
    z-index: 2;
    transform: translateX(-50%) translateY(17%);
    animation-delay: 220ms;
}

.dr-podium-racer:nth-child(n+4) {
    display: none;
}

.dr-podium-racer__avatar {
    width: 72%;
    aspect-ratio: 1;
    margin: 0 auto;
    padding: 3.2%;
    background: linear-gradient(145deg, #fff8d9, #efbd4e);
    border: clamp(2px, 0.18vw, 4px) solid #fff3a1;
    border-radius: 50%;
    box-shadow:
        0 0 0 clamp(3px, 0.24vw, 5px) rgba(169, 99, 13, 0.44),
        0 12px 18px rgba(65, 40, 11, 0.28);
}

.dr-podium-racer.is-child .dr-podium-racer__avatar {
    box-shadow:
        0 0 0 clamp(3px, 0.24vw, 5px) rgba(255, 218, 80, 0.9),
        0 0 0 clamp(6px, 0.48vw, 10px) rgba(91, 229, 255, 0.58),
        0 0 28px rgba(82, 224, 255, 0.75),
        0 12px 18px rgba(65, 40, 11, 0.28);
}

.dr-podium-racer__avatar img {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 50%;
    filter: drop-shadow(0 8px 7px rgba(65, 40, 11, 0.25));
}

.dr-podium-racer__rank {
    position: absolute;
    left: 16%;
    top: 4%;
    z-index: 3;
    display: grid;
    width: clamp(25px, 2.15vw, 43px);
    aspect-ratio: 1;
    place-items: center;
    color: #fffbd7;
    font-size: clamp(12px, 0.96vw, 19px);
    font-weight: 1000;
    background: radial-gradient(circle at 32% 24%, #ffdd64, #d08317 72%);
    border: 2px solid #fff2a2;
    border-radius: 50%;
    box-shadow: 0 4px 0 #84460a, 0 0 13px rgba(255, 218, 86, 0.72);
}

.dr-podium-racer--rank-2 .dr-podium-racer__rank {
    background: radial-gradient(circle at 32% 24%, #effcff, #79b8cd 72%);
}

.dr-podium-racer--rank-3 .dr-podium-racer__rank {
    background: radial-gradient(circle at 32% 24%, #ffd29b, #ba651d 72%);
}

.dr-podium-racer__plaque {
    min-width: 104%;
    margin: -2% -2% 0;
    padding: 3.2% 9% 3.6%;
    color: #fff7d3;
    background: linear-gradient(180deg, rgba(35, 104, 156, 0.98), rgba(14, 52, 94, 0.98));
    border: clamp(1px, 0.1vw, 2px) solid #efc45b;
    border-radius: 999px;
    box-shadow: 0 4px 0 rgba(98, 52, 7, 0.78), 0 8px 16px rgba(31, 52, 75, 0.28);
}

.dr-podium-racer__plaque strong,
.dr-podium-racer__plaque small {
    display: block;
}

.dr-podium-racer__plaque strong {
    overflow: hidden;
    font-size: clamp(9px, 0.7vw, 14px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dr-podium-racer__plaque small {
    margin-top: 0.12em;
    color: #8eeeff;
    font-size: clamp(6px, 0.46vw, 9px);
    font-weight: 1000;
    letter-spacing: 0.05em;
}

.dr-result-actions {
    position: absolute;
    left: 50%;
    bottom: 3.5%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1vw;
    width: 60%;
    transform: translateX(-50%);
}

.dr-primary-button--result {
    min-width: clamp(240px, 25vw, 470px);
    padding: 0.65em 2em;
    font-size: clamp(16px, 1.35vw, 28px);
    font-weight: 800;
}

/* ═══════════════════════════════════════════════════════════════
   RESULT CEREMONY V2
   The Seal belongs to the high altar. Racers and their equipped
   avatar frames occupy the three physical podiums below it.
   ═══════════════════════════════════════════════════════════════ */

#dr-result::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 50% 31%, rgba(255, 245, 169, 0.2), transparent 22%),
        linear-gradient(180deg, transparent 0 76%, rgba(255, 247, 209, 0.08));
}

#dr-result[data-rank="1"]::after {
    background:
        radial-gradient(circle at 50% 31%, rgba(255, 245, 169, 0.32), transparent 24%),
        linear-gradient(180deg, transparent 0 76%, rgba(255, 247, 209, 0.1));
}

#dr-result .dr-result-aura {
    left: 50%;
    top: 28.5%;
    z-index: 3;
    width: 18.5%;
    overflow: visible;
    background: radial-gradient(circle, rgba(255, 248, 191, 0.34), rgba(73, 222, 246, 0.13) 42%, transparent 68%);
    border: 0;
    outline: 0;
    box-shadow: none;
    filter: none;
    animation: none;
}

#dr-result .dr-result-aura::before {
    content: "";
    position: absolute;
    inset: 35%;
    background: radial-gradient(circle, rgba(255, 255, 225, 0.82), rgba(255, 216, 83, 0.32) 42%, transparent 72%);
    border-radius: 50%;
    box-shadow:
        0 0 16px rgba(255, 244, 172, 0.84),
        0 0 34px rgba(100, 232, 255, 0.46);
    pointer-events: none;
}

#dr-result .dr-result-aura::after {
    display: none;
}

#dr-result .dr-result-aura > i {
    position: absolute;
    inset: 0;
    display: block;
    border: clamp(2px, 0.15vw, 4px) solid rgba(116, 239, 255, 0.9);
    border-radius: 50%;
    box-shadow:
        0 0 13px rgba(107, 236, 255, 0.88),
        0 0 26px rgba(255, 221, 94, 0.42),
        inset 0 0 14px rgba(255, 237, 143, 0.24);
    opacity: 0;
    transform: scale(0.12);
    animation: dr-result-aura-ripple 3.2s linear infinite;
    will-change: transform, opacity;
}

#dr-result .dr-result-aura > i:nth-child(2) {
    animation-delay: -0.8s;
}

#dr-result .dr-result-aura > i:nth-child(3) {
    animation-delay: -1.6s;
}

#dr-result .dr-result-aura > i:nth-child(4) {
    animation-delay: -2.4s;
}

#dr-result .dr-result-reward {
    left: 50%;
    top: 19.2%;
    z-index: 4;
    display: block;
    width: 18.5%;
    transform: translateX(-50%);
}

#dr-result .dr-result-reward__rays,
#dr-result .dr-result-reward__orbit {
    left: 50%;
    top: 50%;
}

#dr-result .dr-result-reward__rays {
    display: none;
}

#dr-result .dr-result-reward__orbit {
    display: none;
}

#dr-result .dr-result-reward__visual {
    position: relative;
    z-index: 2;
    width: clamp(128px, 10.8vw, 220px);
    margin: 0 auto;
}

#dr-result .dr-result-reward__visual img {
    filter:
        drop-shadow(0 14px 9px rgba(83, 55, 15, 0.38))
        drop-shadow(-3px -4px 9px rgba(255, 244, 178, 0.48))
        drop-shadow(4px 2px 11px rgba(97, 218, 230, 0.2));
    animation: dr-result-seal-hover 3.2s ease-in-out infinite;
}

.dr-seal-particles {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
}

.dr-seal-particles i {
    position: absolute;
    left: var(--particle-x);
    bottom: 0;
    display: block;
    width: var(--particle-size);
    aspect-ratio: 1;
    background: #fffbd0;
    border-radius: 50%;
    box-shadow:
        0 0 6px 2px rgba(255, 249, 191, 0.92),
        0 0 14px 4px rgba(107, 235, 255, 0.58);
    opacity: 0;
    animation: dr-seal-particle-rise var(--particle-duration) ease-out var(--particle-delay) infinite;
}

.dr-seal-particles i:nth-child(1)  { --particle-x: 8%;  --particle-size: 4px; --particle-duration: 3.2s; --particle-delay: -1.1s; --particle-drift: 10px; }
.dr-seal-particles i:nth-child(2)  { --particle-x: 17%; --particle-size: 7px; --particle-duration: 4.1s; --particle-delay: -3.2s; --particle-drift: -8px; }
.dr-seal-particles i:nth-child(3)  { --particle-x: 27%; --particle-size: 3px; --particle-duration: 3.5s; --particle-delay: -2.4s; --particle-drift: 16px; }
.dr-seal-particles i:nth-child(4)  { --particle-x: 37%; --particle-size: 5px; --particle-duration: 4.4s; --particle-delay: -0.7s; --particle-drift: -13px; }
.dr-seal-particles i:nth-child(5)  { --particle-x: 46%; --particle-size: 8px; --particle-duration: 3.9s; --particle-delay: -2.9s; --particle-drift: 9px; }
.dr-seal-particles i:nth-child(6)  { --particle-x: 55%; --particle-size: 4px; --particle-duration: 3.4s; --particle-delay: -1.8s; --particle-drift: -7px; }
.dr-seal-particles i:nth-child(7)  { --particle-x: 63%; --particle-size: 6px; --particle-duration: 4.3s; --particle-delay: -3.7s; --particle-drift: 14px; }
.dr-seal-particles i:nth-child(8)  { --particle-x: 71%; --particle-size: 3px; --particle-duration: 3.7s; --particle-delay: -0.4s; --particle-drift: -11px; }
.dr-seal-particles i:nth-child(9)  { --particle-x: 79%; --particle-size: 7px; --particle-duration: 4.6s; --particle-delay: -2.1s; --particle-drift: 7px; }
.dr-seal-particles i:nth-child(10) { --particle-x: 88%; --particle-size: 4px; --particle-duration: 3.1s; --particle-delay: -1.5s; --particle-drift: -15px; }
.dr-seal-particles i:nth-child(11) { --particle-x: 33%; --particle-size: 3px; --particle-duration: 4.2s; --particle-delay: -3.4s; --particle-drift: 12px; }
.dr-seal-particles i:nth-child(12) { --particle-x: 68%; --particle-size: 5px; --particle-duration: 3.8s; --particle-delay: -2.6s; --particle-drift: -9px; }

.dr-seal-particles--altar {
    left: 50%;
    bottom: -10%;
    width: 92%;
    height: 116%;
    transform: translateX(-50%);
}

.dr-seal-particles--altar i {
    width: calc(var(--particle-size) + 2px);
    box-shadow:
        0 0 7px 3px rgba(255, 251, 205, 1),
        0 0 17px 5px rgba(94, 233, 255, 0.76);
}

#dr-result .dr-podium {
    inset: 0;
    z-index: 7;
    width: 100%;
    height: 100%;
    transform: none;
}

#dr-result .dr-podium-racer {
    top: 42%;
    bottom: auto;
    width: 20%;
    height: 31%;
    transform: translateX(-50%);
    overflow: visible;
}

#dr-result .dr-podium-racer:nth-child(1) {
    left: 50%;
    z-index: 5;
    transform: translateX(-50%);
}

#dr-result .dr-podium-racer:nth-child(2) {
    left: 29.4%;
    top: 47%;
    z-index: 4;
    transform: translateX(-50%);
}

#dr-result .dr-podium-racer:nth-child(3) {
    left: 70.6%;
    top: 47%;
    z-index: 4;
    transform: translateX(-50%);
}

#dr-result .dr-podium-racer__avatar {
    position: absolute;
    inset: 0 0 auto;
    display: grid;
    width: 100%;
    height: 72%;
    margin: 0;
    padding: 0;
    place-items: center;
    overflow: visible;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

#dr-result .dr-podium-racer__avatar .frame-component {
    width: clamp(88px, 6.6vw, 132px) !important;
    min-width: 0 !important;
    max-width: none !important;
    height: clamp(88px, 6.6vw, 132px) !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    filter: drop-shadow(0 14px 12px rgba(72, 48, 17, 0.3));
}

#dr-result .dr-podium-racer--rank-1 .dr-podium-racer__avatar .frame-component {
    width: clamp(100px, 7.6vw, 152px) !important;
    height: clamp(100px, 7.6vw, 152px) !important;
}

#dr-result .dr-podium-racer__avatar .frame-glow,
#dr-result .dr-podium-racer__avatar .frame-overlay {
    overflow: visible !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

#dr-result .dr-podium-racer__avatar .frame-overlay img {
    object-fit: contain !important;
    border: 0 !important;
    border-radius: 0 !important;
    clip-path: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    box-shadow: none !important;
}

#dr-result .dr-podium-racer__avatar .frame-avatar {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

#dr-result .dr-podium-racer__avatar > img {
    width: clamp(88px, 6.6vw, 132px) !important;
    height: clamp(88px, 6.6vw, 132px) !important;
    object-fit: cover !important;
    border: 3px solid #fff1a2;
    border-radius: 50%;
    box-shadow: 0 9px 16px rgba(72, 48, 17, 0.28);
}

#dr-result .dr-podium-racer.is-child .frame-component {
    filter:
        drop-shadow(0 0 13px rgba(92, 232, 255, 0.88))
        drop-shadow(0 14px 12px rgba(72, 48, 17, 0.34));
}

#dr-result .dr-podium-racer__plaque {
    position: absolute;
    left: 50%;
    top: 69%;
    display: grid;
    width: max-content;
    min-width: clamp(104px, 7.4vw, 150px);
    max-width: 64%;
    margin: 0;
    padding: 0.42em 1.2em 0.48em;
    transform: translateX(-50%);
    place-items: center;
    color: #fff8d6;
    background:
        radial-gradient(circle at 50% 0, rgba(91, 224, 255, 0.2), transparent 52%),
        linear-gradient(180deg, rgba(38, 112, 163, 0.96), rgba(12, 51, 92, 0.98));
    border: clamp(1px, 0.1vw, 2px) solid #f2cc66;
    border-radius: 999px;
    box-shadow:
        0 4px 0 rgba(101, 55, 10, 0.86),
        0 8px 15px rgba(32, 54, 73, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

#dr-result .dr-podium-racer--rank-1 .dr-podium-racer__plaque {
    top: 72%;
    width: max-content;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 244, 160, 0.34), transparent 58%),
        linear-gradient(180deg, #2b82b7, #124f88 65%, #0c3a68);
}

#dr-result .dr-podium-racer__plaque strong {
    max-width: 100%;
    overflow: hidden;
    font-size: clamp(11px, 0.92vw, 18px);
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#dr-result .dr-podium-racer__plaque small,
#dr-result .dr-podium-racer__rank {
    display: none;
}

#dr-result .dr-podium-racer__reward {
    position: absolute;
    top: 31%;
    z-index: 20;
    display: grid;
    width: clamp(60px, 5vw, 100px);
    place-items: center;
    filter: drop-shadow(0 8px 7px rgba(70, 46, 13, 0.3));
    animation: dr-podium-reward-arrive 720ms cubic-bezier(.16, 1.22, .28, 1) 420ms both;
}

#dr-result .dr-podium-racer--rank-2 .dr-podium-racer__reward {
    right: -1%;
}

#dr-result .dr-podium-racer--rank-3 .dr-podium-racer__reward {
    left: -1%;
}

#dr-result .dr-podium-racer__reward > span {
    position: relative;
    display: grid;
    width: 100%;
    aspect-ratio: 1;
    place-items: center;
    background: radial-gradient(circle, rgba(255, 251, 206, 0.9), rgba(87, 224, 244, 0.2) 48%, transparent 72%);
}

#dr-result .dr-podium-racer__reward img {
    display: block;
    width: 96%;
    height: 96%;
    object-fit: contain;
    filter:
        drop-shadow(0 4px 4px rgba(56, 38, 17, 0.35))
        drop-shadow(0 0 8px rgba(75, 230, 255, 0.7));
}

#dr-result .dr-podium-racer__reward b {
    position: absolute;
    right: -5%;
    bottom: 2%;
    display: grid;
    min-width: 44%;
    aspect-ratio: 1;
    place-items: center;
    color: #fffbd8;
    font-size: clamp(13px, 1.05vw, 21px);
    line-height: 1;
    background: radial-gradient(circle at 32% 22%, #44e2ef, #176fa9 68%, #0d467a);
    border: clamp(1px, 0.12vw, 3px) solid #ffe57d;
    border-radius: 50%;
    box-shadow: 0 3px 0 #70410d, 0 0 11px rgba(85, 234, 255, 0.72);
}

#dr-result .dr-podium-racer__reward > small {
    min-width: max-content;
    margin-top: -5%;
    padding: 0.2em 0.72em;
    color: #fff5ba;
    font-size: clamp(8px, 0.64vw, 12px);
    font-weight: 1000;
    line-height: 1;
    white-space: nowrap;
    background: rgba(11, 54, 94, 0.92);
    border: 1px solid rgba(255, 224, 108, 0.8);
    border-radius: 999px;
    box-shadow: 0 3px 0 rgba(105, 58, 8, 0.72);
}

#dr-result .dr-podium-racer__reward.is-formed-seal {
    width: clamp(68px, 5.6vw, 112px);
}

#dr-result .dr-podium-racer__reward.is-formed-seal b {
    right: -12%;
    min-width: 49%;
    font-size: clamp(8px, 0.62vw, 12px);
}

#dr-result .dr-result-actions {
    bottom: 2.6%;
    z-index: 30;
    width: 58%;
}

#dr-result .dr-primary-button--result {
    min-width: clamp(230px, 24vw, 450px);
    padding: 0.55em 1.8em;
    font-size: clamp(14px, 1.18vw, 24px);
}

.dr-reward-claim-modal {
    position: absolute;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: clamp(12px, 2vh, 24px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 220ms ease;
}

.dr-reward-claim-modal,
.dr-reward-claim-modal button,
.dr-reward-claim-modal h2,
.dr-reward-claim-modal strong {
    font-family: var(--dr-font-family);
    font-weight: var(--dr-title-weight);
}

.dr-reward-claim-modal[hidden] {
    display: none !important;
}

.dr-reward-claim-modal.is-open {
    opacity: 1;
    pointer-events: auto;
}

.dr-reward-claim-modal__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(62, 174, 210, 0.17), transparent 34%),
        rgba(3, 22, 53, 0.76);
    border: 0;
    backdrop-filter: blur(8px) saturate(0.82);
    cursor: default;
}

.dr-reward-claim-modal__panel {
    position: relative;
    display: grid;
    width: min(620px, 78vw);
    max-height: 90vh;
    padding: clamp(18px, 2.2vh, 30px) clamp(24px, 3vw, 48px) clamp(20px, 2.8vh, 34px);
    overflow: visible;
    place-items: center;
    color: #fff7c8;
    text-align: center;
    background:
        radial-gradient(circle at 50% 47%, rgba(74, 219, 239, 0.2), transparent 28%),
        radial-gradient(circle at 50% 0, rgba(255, 225, 112, 0.24), transparent 40%),
        linear-gradient(180deg, rgba(22, 99, 157, 0.985), rgba(8, 46, 91, 0.99) 62%, rgba(6, 31, 69, 0.995));
    border: clamp(2px, 0.22vw, 5px) solid #f7d369;
    border-radius: clamp(26px, 3vw, 52px) clamp(12px, 1.6vw, 28px);
    box-shadow:
        0 0 0 clamp(4px, 0.4vw, 8px) rgba(255, 245, 191, 0.16),
        0 0 42px rgba(255, 216, 87, 0.48),
        0 24px 60px rgba(1, 17, 43, 0.58),
        inset 0 1px 0 rgba(255, 255, 255, 0.72),
        inset 0 -8px 24px rgba(2, 24, 62, 0.42);
    clip-path: polygon(5% 0, 95% 0, 100% 8%, 100% 92%, 95% 100%, 5% 100%, 0 92%, 0 8%);
    transform: translateY(5%) scale(0.86);
    transition: transform 420ms cubic-bezier(.16, 1.2, .26, 1);
    isolation: isolate;
}

.dr-reward-claim-modal.is-open .dr-reward-claim-modal__panel {
    transform: translateY(0) scale(1);
}

.dr-reward-claim-modal__panel::before,
.dr-reward-claim-modal__panel::after {
    content: "◆";
    position: absolute;
    top: 50%;
    z-index: -1;
    display: grid;
    width: clamp(32px, 3.4vw, 58px);
    aspect-ratio: 1;
    place-items: center;
    color: #83efff;
    font-size: clamp(16px, 1.6vw, 28px);
    background: radial-gradient(circle, #fffbd0 0 12%, #41cce6 15% 28%, #17629e 31% 52%, #f6ce62 55% 62%, transparent 65%);
    filter: drop-shadow(0 0 12px rgba(102, 236, 255, 0.82));
    transform: translateY(-50%);
}

.dr-reward-claim-modal__panel::before {
    left: clamp(-24px, -1.5vw, -13px);
}

.dr-reward-claim-modal__panel::after {
    right: clamp(-24px, -1.5vw, -13px);
}

.dr-reward-claim-modal__close {
    position: absolute;
    right: 3%;
    top: 3%;
    z-index: 12;
    display: grid;
    width: clamp(32px, 3vw, 48px);
    aspect-ratio: 1;
    padding: 0 0 0.08em;
    place-items: center;
    color: #fff4bc;
    font-family: var(--dr-font-family);
    font-size: clamp(22px, 2vw, 34px);
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(180deg, #267db6, #0c477e);
    border: 2px solid #f4cf64;
    border-radius: 50%;
    box-shadow: 0 4px 0 #653b0b, 0 0 12px rgba(89, 225, 255, 0.4);
    cursor: pointer;
}

.dr-reward-claim-modal h2 {
    width: max-content;
    max-width: none;
    margin: 0.08em 0 0.18em;
    color: #fff5a8;
    font-family: var(--dr-font-family);
    font-size: clamp(20px, 2vw, 34px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.055em;
    white-space: nowrap;
    text-shadow:
        0 3px 0 #b66709,
        0 6px 0 #633408,
        0 0 22px rgba(255, 231, 126, 0.9);
}

.dr-reward-claim-modal__treasure {
    position: relative;
    z-index: 2;
    display: grid;
    width: clamp(180px, 19vw, 270px);
    aspect-ratio: 1;
    margin: 0.12em 0 0;
    place-items: center;
}

.dr-reward-claim-modal__treasure > img {
    position: relative;
    z-index: 5;
    display: block;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter:
        drop-shadow(0 17px 10px rgba(3, 25, 54, 0.48))
        drop-shadow(0 0 15px rgba(255, 243, 165, 0.82))
        drop-shadow(0 0 30px rgba(91, 229, 255, 0.52));
    animation: dr-result-seal-hover 3s ease-in-out infinite;
}

.dr-reward-claim-modal[data-kind="fragments"] .dr-reward-claim-modal__treasure > img {
    width: 66%;
    height: 66%;
    filter:
        drop-shadow(0 16px 9px rgba(3, 25, 54, 0.48))
        drop-shadow(0 0 18px rgba(111, 239, 255, 0.88))
        drop-shadow(0 0 34px rgba(255, 226, 99, 0.58));
}

.dr-reward-claim-modal[data-kind="fragments"] .dr-reward-claim-modal__name {
    font-size: clamp(18px, 1.8vw, 30px);
}

.dr-reward-claim-modal__aura {
    position: absolute;
    inset: 3%;
    z-index: 1;
    background:
        radial-gradient(circle, rgba(255, 254, 225, 0.45) 0 22%, rgba(255, 219, 94, 0.24) 38%, rgba(86, 230, 252, 0.14) 53%, transparent 69%);
    border: clamp(2px, 0.18vw, 4px) solid rgba(121, 239, 255, 0.76);
    border-radius: 50%;
    box-shadow:
        0 0 18px rgba(122, 240, 255, 0.68),
        0 0 40px rgba(255, 216, 82, 0.48),
        inset 0 0 30px rgba(255, 236, 137, 0.32);
}

.dr-reward-claim-modal__aura i {
    position: absolute;
    inset: 12%;
    border: 2px solid rgba(255, 236, 143, 0.78);
    border-radius: 50%;
    opacity: 0;
    animation: dr-claim-aura-expand 3.2s ease-out infinite;
}

.dr-reward-claim-modal__aura i:nth-child(2) {
    animation-delay: -1.06s;
}

.dr-reward-claim-modal__aura i:nth-child(3) {
    animation-delay: -2.12s;
}

.dr-seal-particles--claim {
    inset: 4% 8% 2%;
    z-index: 4;
}

.dr-reward-claim-modal__name {
    margin: 0.05em 0 0.72em;
    color: #fff0a0;
    font-family: var(--dr-font-family);
    font-size: clamp(21px, 2.1vw, 34px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-shadow: 0 3px 0 #784109, 0 0 15px rgba(255, 225, 110, 0.8);
}

.dr-reward-claim-modal__action {
    display: grid;
    min-width: min(390px, 64vw);
    padding: 0.82em 2em 0.88em;
    place-items: center;
    color: #573006;
    background:
        radial-gradient(circle at 50% 0, rgba(255, 255, 230, 0.9), transparent 52%),
        linear-gradient(180deg, #fff1a0, #ffc13e 72%, #ef9412);
    border: clamp(2px, 0.18vw, 4px) solid #fff2a7;
    border-radius: 999px;
    box-shadow:
        0 6px 0 #9c5309,
        0 10px 20px rgba(2, 24, 59, 0.42),
        inset 0 2px 0 rgba(255, 255, 255, 0.82);
    cursor: pointer;
}

.dr-reward-claim-modal__action span {
    font-family: var(--dr-font-family);
    font-size: clamp(14px, 1.25vw, 22px);
    font-weight: 800;
    line-height: 1;
}

.dr-reward-claim-modal__action:hover,
.dr-reward-claim-modal__action:focus-visible {
    filter: brightness(1.08) saturate(1.08);
    transform: translateY(-2px);
}

@keyframes dr-result-aura-ripple {
    0% {
        opacity: 0;
        transform: scale(0.08);
    }
    12% {
        opacity: 0.96;
    }
    72% {
        opacity: 0.48;
    }
    100% {
        opacity: 0;
        transform: scale(1.08);
    }
}

@keyframes dr-result-seal-hover {
    0%, 100% {
        transform: translateY(2.5%) rotate(-0.6deg);
    }
    50% {
        transform: translateY(-3.5%) rotate(0.6deg);
    }
}

@keyframes dr-seal-particle-rise {
    0% {
        opacity: 0;
        transform: translate3d(0, 12%, 0) scale(0.45);
    }
    18% {
        opacity: 0.95;
    }
    72% {
        opacity: 0.66;
    }
    100% {
        opacity: 0;
        transform: translate3d(var(--particle-drift), -155px, 0) scale(1.12);
    }
}

@keyframes dr-claim-aura-expand {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    18% {
        opacity: 0.8;
    }
    100% {
        opacity: 0;
        transform: scale(1.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    #dr-result .dr-result-aura,
    #dr-result .dr-result-aura::after,
    #dr-result .dr-result-aura > i,
    #dr-result .dr-result-reward__visual img,
    .dr-seal-particles i,
    .dr-reward-claim-modal__treasure > img,
    .dr-reward-claim-modal__aura i {
        animation: none !important;
    }
}

@keyframes dr-podium-reward-arrive {
    0% { opacity: 0; transform: translateY(-35%) scale(0.5) rotate(-8deg); }
    70% { opacity: 1; transform: translateY(4%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes dr-reward-arrive {
    0% { opacity: 0; transform: translateY(-48%) scale(0.42) rotate(-8deg); }
    62% { opacity: 1; transform: translateY(4%) scale(1.08) rotate(2deg); }
    100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes dr-reward-float {
    0%, 100% { transform: translateY(0) rotate(-1deg); }
    50% { transform: translateY(-4%) rotate(1deg); }
}

@keyframes dr-reward-rays {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes dr-reward-orbit {
    0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.94); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); }
}

@keyframes dr-podium-racer-in {
    0% { opacity: 0; margin-bottom: -12%; scale: 0.72; }
    100% { opacity: 1; margin-bottom: 0; scale: 1; }
}

@keyframes dr-avatar-shield-pulse {
    0%, 100% { transform: scale(0.94); filter: brightness(1); }
    50% { transform: scale(1.08); filter: brightness(1.18); }
}

@keyframes dr-puddle-shimmer {
    0%, 100% { transform: rotate(-4deg) scaleX(0.96); filter: brightness(0.96); }
    50% { transform: rotate(3deg) scaleX(1.04); filter: brightness(1.15); }
}

@keyframes dr-shield-aura {
    0%, 100% { opacity: 0.7; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
}

@keyframes dr-shield-icon-float {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-13%) rotate(4deg); }
}

@keyframes dr-crying-sob {
    0%, 100% { transform: translateY(1%) rotate(-1deg); }
    50% { transform: translateY(4%) rotate(1deg); }
}

@keyframes dr-crying-recover {
    0% { transform: translate(-50%, -50%) scale(1) rotate(0); }
    35% { transform: translate(-50%, -54%) scale(0.94) rotate(-3deg); }
    68% { transform: translate(-50%, -67%) scale(1.08) rotate(3deg); }
    100% { transform: translate(-50%, -50%) scale(1) rotate(0); }
}

@keyframes dr-shield-block-impact {
    0% { opacity: 0; transform: scale(0.28); }
    16%, 70% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.18); }
}

@keyframes dr-shield-block-ring {
    0% { opacity: 1; transform: scale(0.22) rotate(0); }
    72% { opacity: 0.96; transform: scale(1) rotate(160deg); }
    100% { opacity: 0; transform: scale(1.46) rotate(220deg); }
}

@keyframes dr-shield-break {
    0% { opacity: 0; transform: scale(0.32) rotate(-12deg); }
    24% { opacity: 1; transform: scale(1.16) rotate(3deg); }
    64% { opacity: 1; transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 14px #d9ffff); }
    100% { opacity: 0; transform: scale(1.35) rotate(12deg); filter: brightness(2.2) blur(2px); }
}

@keyframes dr-puddle-cry-in {
    0% { opacity: 0; transform: translateY(-28%) scale(0.35) rotate(-8deg); }
    22% { opacity: 1; transform: translateY(7%) scale(1.1) rotate(4deg); }
    68% { opacity: 1; transform: translateY(0) scale(1) rotate(-2deg); }
    100% { opacity: 0; transform: translateY(4%) scale(1.04) rotate(2deg); }
}

@keyframes dr-puddle-drops {
    0%, 100% { opacity: 0.5; transform: translateY(-3%) scale(0.9); }
    50% { opacity: 1; transform: translateY(5%) scale(1.1); }
}

@keyframes dr-stage-puddle-wobble {
    0%, 100% { translate: 0 0; rotate: 0deg; }
    18% { translate: -0.35% 0.25%; rotate: -0.12deg; }
    38% { translate: 0.35% -0.18%; rotate: 0.12deg; }
    58% { translate: -0.2% 0.12%; rotate: -0.08deg; }
    78% { translate: 0.12% -0.06%; rotate: 0.04deg; }
}

@keyframes dr-shield-popup {
    0%, 100% { transform: scale(0.9); filter: brightness(1) drop-shadow(0 0 16px rgba(210, 255, 255, 0.94)); }
    50% { transform: scale(1.1); filter: brightness(1.22) drop-shadow(0 0 28px rgba(210, 255, 255, 1)); }
}

.dr-rotate-prompt {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    place-items: center;
    padding: 10vw;
    color: white;
    text-align: center;
    background: radial-gradient(circle at 50% 35%, #46c8f0, #124b8b);
}

.dr-rotate-prompt div {
    font-size: 22vw;
    animation: dr-phone-rotate 2s ease-in-out infinite;
}

.dr-rotate-prompt strong {
    display: block;
    margin-top: 1em;
    font-size: clamp(24px, 7vw, 46px);
}

@keyframes dr-phone-rotate {
    0%, 25% { transform: rotate(0); }
    60%, 100% { transform: rotate(90deg); }
}

.dr-stage > game-hud {
    position: absolute;
    inset: 0;
    z-index: 40;
    pointer-events: none;
}

.dr-stage > game-hud .game-hud-root {
    pointer-events: auto;
}

.dragon-filter--orange { filter: hue-rotate(0deg) saturate(1.03); }
.dragon-filter--blue { filter: hue-rotate(170deg) saturate(1.03); }
.dragon-filter--green { filter: hue-rotate(80deg) saturate(0.88) brightness(1.04); }
.dragon-filter--pink { filter: hue-rotate(305deg) saturate(0.85) brightness(1.08); }
.dragon-filter--white { filter: grayscale(0.9) saturate(0.18) brightness(1.24) sepia(0.08); }

.dr-test-toolbar {
    position: absolute;
    z-index: 120;
    top: 1.2%;
    right: 1.2%;
    display: flex;
    align-items: center;
    gap: 10px;
    transform: none;
    padding: 7px 12px;
    border: 1px solid rgba(255, 225, 126, 0.72);
    border-radius: 999px;
    color: #fff5ca;
    background: rgba(28, 18, 55, 0.82);
    box-shadow: 0 5px 18px rgba(13, 8, 38, 0.34);
    font: 800 clamp(9px, 0.72vw, 13px)/1 "Baloo 2", sans-serif;
    letter-spacing: 0.06em;
    backdrop-filter: blur(8px);
}

.dr-test-toolbar a {
    color: #fff;
    text-decoration: none;
}

.dr-test-toolbar a:hover {
    color: #ffd867;
}

.dragon-race-test-mode game-hud {
    display: none;
}

.dr-track-grid-debug {
    position: absolute;
    inset: 0;
    z-index: 42;
    pointer-events: none;
}

.dr-track-grid-debug span {
    position: absolute;
    left: var(--debug-x);
    top: var(--debug-y);
    display: grid;
    width: clamp(16px, 1.35vw, 26px);
    aspect-ratio: 1;
    place-items: center;
    transform: translate(-50%, -50%);
    color: #fff;
    background: rgba(0, 44, 94, 0.78);
    border: 1px solid #77efff;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 222, 90, 0.52);
}

.dr-track-grid-debug b {
    font-size: clamp(6px, 0.43vw, 9px);
}

@media (max-aspect-ratio: 7 / 4) and (orientation: landscape) {
    .dr-app {
        background:
            linear-gradient(180deg, #082f5e, #58bdf5 22%, #dff8ff 50%, #58bdf5 78%, #082f5e);
    }

    .dr-stage {
        width: 100vw;
        height: 50vw;
    }
}

@media (orientation: portrait) {
    .dragon-race-page .dr-app,
    .dragon-race-modal .dr-app {
        visibility: hidden;
    }

    .dragon-race-page .dr-rotate-prompt,
    .dragon-race-modal .dr-rotate-prompt {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dr-stage *,
    .dr-stage *::before,
    .dr-stage *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-color-scheme: dark) {
    .dr-gate-card,
    .dr-scene-header {
        box-shadow:
            0 0 0 1px rgba(255, 240, 172, 0.25),
            0 12px 34px rgba(3, 22, 44, 0.36);
    }
}