:root {
    --pink-950: #64172d;
    --pink-900: #851f3f;
    --pink-800: #aa294e;
    --pink-700: #ce365d;
    --pink-600: #eb4d72;
    --pink-500: #f8658a;
    --pink-400: #ff83a2;
    --pink-300: #ffa8bc;
    --pink-200: #ffcbd6;
    --pink-100: #ffe7ed;
    --pink-50: #fff5f7;
    --cream: #fffaf2;
    --cream-deep: #fff0dd;
    --gold: #d99b3f;
    --gold-light: #ffe2a8;
    --ink: #43232d;
    --muted: #795f67;
    --success: #167c5a;
    --error: #b4233f;
    --white: #fff;
    --shadow-soft: 0 14px 40px rgba(146, 34, 70, 0.14);
    --shadow-card: 0 10px 28px rgba(112, 34, 57, 0.12);
    --radius-xl: 30px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --visible-viewport-height: 100vh;
    --visible-viewport-top: 0px;
    --wheel-size: min(88vw, 408px);
    font-family:
        "Noto Sans TC",
        "PingFang TC",
        "Microsoft JhengHei",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        sans-serif;
    color: var(--ink);
    background: #f9dbe3;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-x: clip;
    min-width: 280px;
    min-height: 100%;
    scroll-behavior: smooth;
    background: #f9dbe3;
}

body {
    min-width: 280px;
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    background:
        linear-gradient(180deg, rgba(248, 101, 138, 0.18), rgba(255, 245, 247, 0.94) 48%, rgba(255, 248, 241, 0.98)),
        url("/assets/images/background.jpg") top center / min(100%, 720px) auto no-repeat,
        #f9dbe3;
}

body.modal-open {
    overflow: hidden;
    position: fixed;
    inset-inline: 0;
    top: var(--modal-scroll-offset, 0px);
    width: 100%;
}

button,
input,
a {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

img {
    display: block;
    max-width: 100%;
}

.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;
}

.skip-link {
    position: fixed;
    z-index: 2000;
    top: calc(var(--safe-top) + 8px);
    left: 12px;
    padding: 10px 14px;
    color: var(--white);
    background: var(--pink-950);
    border-radius: 10px;
    transform: translateY(-160%);
    transition: transform 0.2s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

.app-shell {
    position: relative;
    width: min(100%, 560px);
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0 auto;
    padding:
        calc(var(--safe-top) + 16px)
        16px
        calc(var(--safe-bottom) + 104px);
}

.campaign-header {
    position: relative;
    z-index: 1;
    padding-top: 4px;
    text-align: center;
}

.campaign-header__topline {
    display: grid;
    min-height: 44px;
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    align-items: center;
    gap: 6px;
}

.campaign-header__topline-spacer {
    display: block;
    width: 44px;
    height: 44px;
}

.campaign-header::before,
.campaign-header::after {
    position: absolute;
    z-index: -1;
    content: "";
    pointer-events: none;
    filter: blur(0.2px);
}

.campaign-header::before {
    top: 8%;
    left: -12%;
    width: 82px;
    height: 82px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.08) 52%, rgba(249, 97, 139, 0.12));
    box-shadow: inset -10px -8px 20px rgba(220, 73, 111, 0.12);
}

.campaign-header::after {
    right: -5%;
    bottom: 8%;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.06) 56%, rgba(249, 97, 139, 0.16));
}

.campaign-header__eyebrow {
    display: inline-flex;
    max-width: 100%;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    justify-self: center;
    gap: 8px;
    padding: 6px 14px;
    color: var(--pink-900);
    font-size: clamp(0.62rem, 2.8vw, 0.74rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    background: rgba(255, 250, 242, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 999px;
    box-shadow: 0 5px 18px rgba(129, 31, 62, 0.1);
    backdrop-filter: blur(8px);
}

.campaign-header__eyebrow span {
    color: var(--pink-500);
    font-size: 1rem;
}

.music-toggle {
    position: relative;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    justify-self: end;
    padding: 0;
    color: var(--pink-800);
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.95), transparent 27%),
        linear-gradient(145deg, rgba(255, 250, 242, 0.97), rgba(255, 222, 231, 0.95));
    border: 1px solid rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    box-shadow:
        0 7px 18px rgba(129, 31, 62, 0.16),
        inset 0 0 0 1px rgba(248, 101, 138, 0.15);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.16s ease,
        opacity 0.2s ease;
}

.music-toggle:hover {
    transform: translateY(-1px);
    box-shadow:
        0 9px 22px rgba(129, 31, 62, 0.2),
        inset 0 0 0 1px rgba(248, 101, 138, 0.2);
}

.music-toggle:active {
    transform: translateY(1px) scale(0.97);
}

.music-toggle:focus-visible {
    outline: 3px solid rgba(92, 34, 142, 0.66);
    outline-offset: 3px;
}

.music-toggle.is-playing {
    color: var(--white);
    background:
        radial-gradient(circle at 34% 27%, rgba(255, 255, 255, 0.54), transparent 27%),
        linear-gradient(145deg, var(--pink-400), var(--pink-700));
    box-shadow:
        0 8px 20px rgba(176, 39, 78, 0.28),
        inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.music-toggle.is-pending {
    opacity: 0.82;
}

.music-toggle.is-muted {
    color: #8b7179;
    background: rgba(255, 250, 242, 0.9);
}

.music-toggle__note {
    display: block;
    margin: -2px 3px 0 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.42rem;
    font-weight: 800;
    line-height: 1;
    transform-origin: 50% 80%;
}

.music-toggle.is-playing .music-toggle__note {
    animation: music-note-sway 1.5s ease-in-out infinite;
}

.music-toggle.is-muted .music-toggle__note {
    opacity: 0.7;
}

.music-toggle.is-muted::after {
    position: absolute;
    width: 25px;
    height: 2px;
    content: "";
    background: currentColor;
    border-radius: 999px;
    transform: rotate(-45deg);
}

.music-toggle__bars {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    height: 10px;
    align-items: flex-end;
    gap: 1.5px;
}

.music-toggle__bars span {
    display: block;
    width: 2px;
    height: 3px;
    background: currentColor;
    border-radius: 999px;
    transform-origin: bottom;
}

.music-toggle.is-playing .music-toggle__bars span {
    animation: music-level 0.72s ease-in-out infinite alternate;
}

.music-toggle.is-playing .music-toggle__bars span:nth-child(2) {
    animation-delay: -0.32s;
}

.music-toggle.is-playing .music-toggle__bars span:nth-child(3) {
    animation-delay: -0.52s;
}

.music-toggle.is-muted .music-toggle__bars {
    opacity: 0;
}

@keyframes music-note-sway {
    0%,
    100% {
        transform: rotate(-4deg) translateY(0);
    }

    50% {
        transform: rotate(5deg) translateY(-1px);
    }
}

@keyframes music-level {
    from {
        height: 3px;
    }

    to {
        height: 10px;
    }
}

.campaign-header__subtitle {
    max-width: 420px;
    margin: 14px auto 0;
    color: var(--pink-950);
    font-size: clamp(0.94rem, 3.8vw, 1.08rem);
    font-weight: 800;
    letter-spacing: 0.025em;
    line-height: 1.55;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.85);
}

.campaign-header__period {
    display: inline-flex;
    margin: 8px auto 0;
    padding: 5px 12px;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.64);
    border-radius: 999px;
}

main {
    position: relative;
    z-index: 1;
}

.code-card,
.wheel-section,
.trust-card {
    border: 1px solid rgba(255, 255, 255, 0.94);
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(10px);
}

.code-card {
    position: relative;
    margin-top: 18px;
    padding: 18px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 247, 238, 0.94));
    border-radius: var(--radius-lg);
}

.code-card::after {
    position: absolute;
    top: -38px;
    right: -32px;
    width: 112px;
    height: 112px;
    content: "";
    pointer-events: none;
    background: radial-gradient(circle, rgba(255, 168, 188, 0.26), transparent 70%);
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 11px;
}

.section-heading__icon {
    display: grid;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--white);
    font-size: 1.05rem;
    background: linear-gradient(145deg, var(--pink-400), var(--pink-700));
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 6px 14px rgba(206, 54, 93, 0.25);
}

.section-heading h2,
.wheel-section__heading h2 {
    margin: 0;
    color: var(--pink-950);
    font-size: clamp(1rem, 4.5vw, 1.22rem);
    line-height: 1.3;
}

.section-heading p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.code-form {
    margin-top: 15px;
}

.code-form label {
    display: block;
    margin-bottom: 7px;
    color: var(--pink-900);
    font-size: 0.78rem;
    font-weight: 800;
}

.code-form__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px;
}

.code-form input {
    width: 100%;
    min-width: 0;
    min-height: 50px;
    padding: 0 14px;
    color: var(--ink);
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    background: var(--white);
    border: 1.5px solid var(--pink-200);
    border-radius: 14px;
    outline: 0;
    box-shadow: inset 0 2px 5px rgba(102, 30, 53, 0.04);
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.code-form input::placeholder {
    color: #aa939a;
    font-weight: 500;
    letter-spacing: 0;
}

.code-form input:focus {
    background: var(--white);
    border-color: var(--pink-500);
    box-shadow: 0 0 0 4px rgba(248, 101, 138, 0.14);
}

.code-form input[aria-invalid="true"] {
    border-color: var(--error);
    box-shadow: 0 0 0 4px rgba(180, 35, 63, 0.1);
}

.button {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: var(--ink);
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        opacity 0.16s ease;
}

.button:hover {
    transform: translateY(-1px);
}

.button:active {
    transform: translateY(1px);
}

.button:focus-visible,
.quick-nav button:focus-visible,
.quick-nav a:focus-visible,
.draw-button:focus-visible,
.modal__close:focus-visible {
    outline: 3px solid rgba(92, 34, 142, 0.66);
    outline-offset: 3px;
}

.button:disabled {
    cursor: wait;
    opacity: 0.62;
    transform: none;
}

.button--verify {
    min-width: 112px;
    color: var(--white);
    font-size: 0.84rem;
    background: linear-gradient(145deg, var(--pink-500), var(--pink-700));
    box-shadow: 0 7px 16px rgba(206, 54, 93, 0.24);
}

.button--primary {
    color: var(--white);
    background: linear-gradient(145deg, var(--pink-500), var(--pink-700));
    box-shadow: 0 8px 18px rgba(206, 54, 93, 0.24);
}

.button--secondary {
    color: var(--pink-900);
    background: linear-gradient(145deg, #fff4d7, #ffd485);
    box-shadow: 0 8px 18px rgba(182, 123, 37, 0.18);
}

.button--full {
    width: 100%;
}

.code-form__help {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.5;
}

.form-message {
    min-height: 1.3em;
    margin: 5px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.45;
}

.form-message[data-state="success"] {
    color: var(--success);
}

.form-message[data-state="error"] {
    color: var(--error);
}

.wheel-section {
    position: relative;
    margin-top: 16px;
    padding: 18px 8px 16px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.82), transparent 43%),
        linear-gradient(180deg, rgba(255, 245, 247, 0.96), rgba(255, 224, 232, 0.94));
    border-radius: var(--radius-xl);
}

.wheel-section::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    opacity: 0.45;
    background-image:
        radial-gradient(circle at 8% 12%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 88% 19%, #fff 0 2px, transparent 3px),
        radial-gradient(circle at 14% 75%, #fff 0 1.5px, transparent 2.5px),
        radial-gradient(circle at 92% 78%, #fff 0 1.5px, transparent 2.5px);
}

.wheel-section__heading {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 46px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 10px;
}

.wheel-section__kicker {
    display: block;
    margin-bottom: 2px;
    color: var(--pink-600);
    font-size: 0.61rem;
    font-weight: 900;
    letter-spacing: 0.22em;
}

.eligibility-badge {
    display: inline-flex;
    min-height: 30px;
    flex: 0 0 auto;
    align-items: center;
    padding: 4px 10px;
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 850;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--pink-200);
    border-radius: 999px;
}

.eligibility-badge[data-state="ready"] {
    color: var(--success);
    background: #effbf6;
    border-color: #8bd4bc;
}

.eligibility-badge[data-state="busy"] {
    color: var(--pink-900);
    background: #fff5f7;
}

.wheel-stage {
    position: relative;
    display: grid;
    min-height: calc(var(--wheel-size) + 52px);
    place-items: center;
    margin-top: 0;
    padding-top: 35px;
}

.wheel-frame {
    position: relative;
    width: var(--wheel-size);
    height: var(--wheel-size);
    padding: clamp(9px, 2.6vw, 13px);
    background:
        radial-gradient(circle, transparent 64%, rgba(255, 250, 227, 0.84) 65% 68%, transparent 69%),
        conic-gradient(from 0deg, #f4597e, #ff97ae, #ea446f, #ffb2c2, #f45b82, #ff8da8, #dc365f, #ff9eb4, #f4597e);
    border: clamp(5px, 1.7vw, 8px) solid #ffd9a0;
    border-radius: 50%;
    box-shadow:
        0 0 0 5px var(--pink-700),
        0 0 0 8px rgba(255, 255, 255, 0.86),
        0 20px 34px rgba(121, 29, 58, 0.25),
        inset 0 0 18px rgba(255, 255, 255, 0.48);
}

.wheel-frame::before {
    position: absolute;
    z-index: 4;
    inset: -3px;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        #fff7c6 0deg 1.8deg,
        transparent 1.8deg 43.2deg,
        #fff7c6 43.2deg 45deg
    );
    -webkit-mask: radial-gradient(circle, transparent 77%, #000 78% 100%);
    mask: radial-gradient(circle, transparent 77%, #000 78% 100%);
}

.wheel-rotor {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--cream);
    border: 2px solid rgba(194, 114, 44, 0.34);
    border-radius: 50%;
    transform: rotate(var(--wheel-rotation, 0deg));
    transform-origin: 50% 50%;
    will-change: transform;
}

.wheel-rotor.is-spinning {
    transition: transform var(--spin-duration, 5000ms) cubic-bezier(0.12, 0.62, 0.08, 1);
}

.wheel-rotor__surface {
    position: absolute;
    z-index: 0;
    inset: 0;
    background:
        repeating-conic-gradient(
            from -22.5deg,
            rgba(193, 110, 37, 0.3) 0deg 0.7deg,
            transparent 0.7deg 45deg
        ),
        conic-gradient(
            from -22.5deg,
            #fff7e6 0deg 45deg,
            #ffdfe7 45deg 90deg,
            #fff7e6 90deg 135deg,
            #ffdfe7 135deg 180deg,
            #fff7e6 180deg 225deg,
            #ffdfe7 225deg 270deg,
            #fff7e6 270deg 315deg,
            #ffdfe7 315deg 360deg
        );
}

.wheel-rotor__surface::after {
    position: absolute;
    inset: 8%;
    content: "";
    border: 1px solid rgba(207, 129, 60, 0.24);
    border-radius: 50%;
}

.wheel-slot {
    position: absolute;
    z-index: 1;
    inset: 0;
    transform: rotate(var(--slot-angle));
    transform-origin: center;
    pointer-events: none;
}

.wheel-slot__content {
    position: absolute;
    top: 6.2%;
    left: 50%;
    display: flex;
    width: 25%;
    min-width: 56px;
    max-width: 86px;
    min-height: 26%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transform: translateX(-50%) rotate(calc(-1 * var(--slot-angle)));
    /*
     * Counter-rotate only around the prize card itself. Using the wheel
     * centre here cancels the parent's radial positioning and stacks every
     * prize at twelve o'clock on mobile browsers.
     */
    transform-origin: 50% 50%;
}

.wheel-slot__image {
    width: clamp(34px, calc(var(--wheel-size) * 0.13), 56px);
    height: clamp(34px, calc(var(--wheel-size) * 0.13), 56px);
    object-fit: contain;
    filter: drop-shadow(0 4px 4px rgba(103, 35, 53, 0.15));
}

.wheel-slot__heart {
    display: grid;
    width: clamp(34px, calc(var(--wheel-size) * 0.13), 56px);
    height: clamp(34px, calc(var(--wheel-size) * 0.13), 56px);
    place-items: center;
    color: var(--pink-600);
    font-family: Georgia, serif;
    font-size: clamp(1.55rem, 7vw, 2.2rem);
    font-weight: 700;
    line-height: 1;
    text-shadow: 0 3px 6px rgba(182, 47, 84, 0.18);
}

.wheel-slot__label {
    display: block;
    width: 118%;
    margin-top: 1px;
    color: var(--pink-950);
    font-size: clamp(0.53rem, 2.35vw, 0.72rem);
    font-weight: 900;
    line-height: 1.12;
    text-align: center;
    text-wrap: balance;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
}

.wheel-slot--thanks .wheel-slot__label {
    color: var(--pink-700);
}

.draw-button {
    position: absolute;
    z-index: 8;
    top: 50%;
    left: 50%;
    display: flex;
    width: clamp(68px, calc(var(--wheel-size) * 0.235), 94px);
    height: clamp(68px, calc(var(--wheel-size) * 0.235), 94px);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 0;
    color: var(--white);
    background:
        radial-gradient(circle at 38% 24%, rgba(255, 255, 255, 0.55), transparent 22%),
        linear-gradient(160deg, #ff8ca9, #e43563 68%, #aa2449);
    border: clamp(4px, 1.25vw, 6px) solid #fff4d5;
    border-radius: 50%;
    box-shadow:
        0 0 0 4px var(--pink-600),
        0 8px 18px rgba(134, 28, 61, 0.35),
        inset 0 -5px 10px rgba(119, 22, 53, 0.23);
    transform: translate(-50%, -50%);
    cursor: pointer;
    touch-action: manipulation;
    transition:
        transform 0.16s ease,
        filter 0.2s ease,
        opacity 0.2s ease;
}

.draw-button:hover:not(:disabled) {
    transform: translate(-50%, -50%) scale(1.035);
}

.draw-button:active:not(:disabled) {
    transform: translate(-50%, -50%) scale(0.97);
}

.draw-button:disabled {
    color: rgba(255, 255, 255, 0.8);
    cursor: not-allowed;
    filter: grayscale(0.5);
    opacity: 0.78;
}

.draw-button__main {
    margin-top: -1px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(1.3rem, calc(var(--wheel-size) * 0.065), 1.75rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.05em;
}

.draw-button__label {
    margin-top: 3px;
    font-size: clamp(0.52rem, 2.3vw, 0.7rem);
    font-weight: 900;
}

.wheel-pointer {
    position: absolute;
    z-index: 12;
    top: 25px;
    left: 50%;
    width: 42px;
    height: 56px;
    transform: translateX(-50%);
    filter: drop-shadow(0 6px 6px rgba(111, 25, 52, 0.3));
}

.wheel-pointer::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 36px;
    height: 36px;
    content: "";
    background:
        radial-gradient(circle at 36% 24%, rgba(255, 255, 255, 0.8), transparent 24%),
        linear-gradient(145deg, #ff8aa6, #ca2a56);
    border: 4px solid #fff0c6;
    border-radius: 50%;
    transform: translateX(-50%);
}

.wheel-pointer span {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 0;
    height: 0;
    border-top: 28px solid var(--pink-700);
    border-right: 14px solid transparent;
    border-left: 14px solid transparent;
    transform: translateX(-50%);
}

.wheel-light {
    position: absolute;
    z-index: 0;
    width: 8px;
    height: 8px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 0 10px 4px rgba(255, 255, 255, 0.72);
    animation: twinkle 1.8s ease-in-out infinite alternate;
}

.wheel-light--one {
    top: 20%;
    left: 5%;
}

.wheel-light--two {
    top: 49%;
    right: 4%;
    animation-delay: 0.5s;
}

.wheel-light--three {
    bottom: 12%;
    left: 10%;
    width: 6px;
    height: 6px;
    animation-delay: 1s;
}

@keyframes twinkle {
    from {
        opacity: 0.35;
        transform: scale(0.7);
    }

    to {
        opacity: 1;
        transform: scale(1.16);
    }
}

.wheel-section__hint {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: 9px auto 0;
    color: var(--muted);
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.5;
    text-align: center;
}

.trust-card {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 16px;
    padding: 14px 9px;
    background: rgba(255, 250, 242, 0.9);
    border-radius: var(--radius-lg);
}

.trust-card > div {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 2px 6px;
}

.trust-card > div + div {
    border-left: 1px dashed var(--pink-200);
}

.trust-card > div > span {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--pink-700);
    font-weight: 900;
    background: var(--pink-100);
    border-radius: 50%;
}

.trust-card p {
    min-width: 0;
    margin: 0;
    line-height: 1.2;
}

.trust-card strong,
.trust-card small {
    display: block;
}

.trust-card strong {
    color: var(--pink-950);
    font-size: clamp(0.61rem, 2.65vw, 0.72rem);
    white-space: nowrap;
}

.trust-card small {
    margin-top: 3px;
    color: var(--muted);
    font-size: clamp(0.51rem, 2.25vw, 0.61rem);
    white-space: nowrap;
}

.quick-nav {
    position: fixed;
    z-index: 50;
    right: 50%;
    bottom: max(10px, var(--safe-bottom));
    display: grid;
    width: min(calc(100% - 24px), 520px);
    min-height: 70px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: visible;
    background: rgba(255, 253, 248, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.96);
    border-radius: 22px;
    box-shadow:
        0 12px 34px rgba(94, 25, 47, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transform: translateX(50%);
    backdrop-filter: blur(18px);
}

.quick-nav button,
.quick-nav a {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    padding: 7px 4px 6px;
    color: var(--muted);
    font-size: clamp(0.62rem, 2.8vw, 0.72rem);
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.quick-nav button + button::before,
.quick-nav button + a::before {
    position: absolute;
    top: 18%;
    bottom: 18%;
    left: 0;
    width: 1px;
    content: "";
    background: var(--pink-100);
}

.quick-nav button > span:first-child,
.quick-nav a > span:first-child {
    color: var(--pink-600);
    font-family: Georgia, serif;
    font-size: 1.2rem;
    line-height: 1;
}

.quick-nav .quick-nav__support {
    min-height: 58px;
    align-self: center;
    margin: 5px;
    padding: 6px 3px;
    color: var(--white);
    background: linear-gradient(145deg, #ff5f88, #c82358);
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(193, 28, 75, 0.32);
    animation: support-attention 2.8s ease-in-out infinite;
}

.quick-nav .quick-nav__support > span:first-child {
    color: var(--white);
    font-size: 1.28rem;
}

.quick-nav .quick-nav__online {
    position: absolute;
    top: -4px;
    inset-inline-end: 4px;
    max-width: calc(100% - 8px);
    padding: 1px 5px 2px;
    overflow: hidden;
    white-space: nowrap;
    color: #9b163f;
    font-size: 0.5rem;
    font-weight: 900;
    line-height: 1.25;
    background: #fff3a8;
    border-radius: 999px;
}

.customer-service-cta {
    position: fixed;
    z-index: 58;
    bottom: calc(max(10px, var(--safe-bottom)) + 80px);
    left: max(18px, calc(50% - 250px));
    display: flex;
    width: min(calc(100% - 112px), 300px);
    min-height: 56px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--white);
    text-decoration: none;
    background: linear-gradient(135deg, rgba(172, 23, 68, 0.97), rgba(246, 77, 126, 0.97));
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 18px;
    box-shadow: 0 12px 30px rgba(105, 14, 46, 0.34);
    backdrop-filter: blur(12px);
    animation: support-attention 2.8s ease-in-out infinite;
}

.customer-service-cta:focus-visible {
    outline: 3px solid rgba(92, 34, 142, 0.76);
    outline-offset: 3px;
}

.customer-service-cta__indicator {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
    background: #6dffb1;
    border: 2px solid var(--white);
    border-radius: 50%;
    box-shadow: 0 0 0 5px rgba(109, 255, 177, 0.18);
}

.customer-service-cta__copy {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    line-height: 1.25;
}

.customer-service-cta__copy strong {
    font-size: 0.82rem;
    font-weight: 950;
}

.customer-service-cta__copy small {
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.62rem;
    font-weight: 700;
}

.customer-service-cta__action {
    flex: 0 0 auto;
    padding: 4px 7px;
    color: #9a173f;
    font-size: 0.62rem;
    font-weight: 900;
    background: #fff8d8;
    border-radius: 999px;
}

@keyframes support-attention {
    0%, 100% {
        box-shadow: 0 10px 24px rgba(193, 28, 75, 0.28);
        transform: translateY(0);
    }
    50% {
        box-shadow: 0 14px 32px rgba(193, 28, 75, 0.44);
        transform: translateY(-2px);
    }
}

.campaign-footer {
    padding: 20px 12px 0;
    color: rgba(78, 47, 56, 0.72);
    font-size: 0.68rem;
    line-height: 1.65;
    text-align: center;
}

.campaign-footer p {
    margin: 0;
}

.modal[hidden],
.toast[hidden] {
    display: none;
}

.modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    top: var(--visible-viewport-top);
    bottom: auto;
    height: var(--visible-viewport-height);
    display: grid;
    align-items: center;
    justify-items: center;
    padding:
        calc(var(--safe-top) + 18px)
        max(16px, var(--safe-right))
        calc(var(--safe-bottom) + 18px);
    padding-left: max(16px, var(--safe-left));
}

.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(70, 17, 36, 0.72);
    backdrop-filter: blur(8px);
    animation: fade-in 0.22s ease both;
}

.modal__dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    max-height: calc(var(--visible-viewport-height) - var(--safe-top) - var(--safe-bottom) - 36px);
    overflow: auto;
    overscroll-behavior: contain;
    background: var(--cream);
    border: 2px solid rgba(255, 255, 255, 0.94);
    border-radius: 28px;
    box-shadow: 0 24px 70px rgba(67, 18, 36, 0.4);
    animation: modal-in 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.08) both;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal__close {
    position: absolute;
    z-index: 5;
    top: 10px;
    right: 10px;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0 0 3px;
    color: var(--pink-950);
    font-size: 1.7rem;
    line-height: 1;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 199, 213, 0.9);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(83, 20, 43, 0.12);
    cursor: pointer;
}

.result-dialog {
    overflow: hidden auto;
}

.result-dialog__body {
    padding: 10px 20px 20px;
    text-align: center;
}

.result-dialog__eyebrow {
    color: var(--pink-600);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.24em;
}

.result-dialog h2 {
    margin: 5px 0 0;
    color: var(--pink-800);
    font-size: clamp(1.45rem, 6.7vw, 1.95rem);
    line-height: 1.2;
}

.result-dialog__description {
    margin: 7px auto 0;
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.result-prize {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 12px;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--pink-200);
    border-radius: 17px;
    box-shadow: 0 7px 20px rgba(94, 25, 47, 0.08);
}

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

.result-prize img {
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
    object-fit: contain;
    background: var(--pink-50);
    border-radius: 13px;
}

.result-prize span,
.result-prize strong {
    display: block;
}

.result-prize span {
    color: var(--muted);
    font-size: 0.7rem;
}

.result-prize strong {
    margin-top: 4px;
    color: var(--pink-950);
    font-size: 1rem;
    line-height: 1.35;
}

.redemption-block {
    margin-top: 14px;
    padding: 14px 10px 12px;
    background:
        linear-gradient(var(--cream), var(--cream)) padding-box,
        repeating-linear-gradient(90deg, #f4bd3e 0 7px, transparent 7px 11px) border-box;
    border: 2px solid transparent;
    border-radius: 16px;
}

.redemption-block[hidden] {
    display: none;
}

.redemption-block span,
.redemption-block strong,
.redemption-block small {
    display: block;
}

.redemption-block span {
    color: var(--muted);
    font-size: 0.76rem;
}

.redemption-block strong {
    margin-top: 6px;
    color: var(--pink-700);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: clamp(1.35rem, 7vw, 1.85rem);
    letter-spacing: 0.08em;
    overflow-wrap: anywhere;
}

.redemption-block small {
    margin-top: 7px;
    color: var(--muted);
    font-size: 0.66rem;
    line-height: 1.45;
}

.claim-note {
    margin: 12px auto 0;
    color: var(--muted);
    font-size: 0.72rem;
    line-height: 1.55;
}

.result-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

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

.info-dialog {
    padding: 25px 20px 20px;
}

.info-dialog__header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 5px 46px 14px;
    color: var(--pink-600);
}

.info-dialog__header h2 {
    margin: 0;
    color: var(--pink-900);
    font-size: 1.28rem;
}

.info-dialog__content {
    max-height: min(58dvh, 520px);
    margin-bottom: 16px;
    overflow: auto;
    color: var(--ink);
    font-size: 0.85rem;
    line-height: 1.8;
    text-align: left;
    white-space: pre-line;
}

.info-dialog__content p {
    margin: 0;
}

.prize-list {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.prize-list li {
    display: flex;
    min-height: 64px;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    background: var(--white);
    border: 1px solid var(--pink-100);
    border-radius: 14px;
}

.prize-list img,
.prize-list__placeholder {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    place-items: center;
    object-fit: contain;
    color: var(--pink-600);
    font-family: Georgia, serif;
    font-size: 1.7rem;
    background: var(--pink-50);
    border-radius: 11px;
}

.prize-list strong {
    color: var(--pink-950);
    line-height: 1.35;
}

.prize-list small {
    display: block;
    margin-top: 2px;
    color: var(--muted);
}

.toast {
    position: fixed;
    z-index: 1500;
    right: 50%;
    bottom: calc(var(--safe-bottom) + 96px);
    max-width: min(calc(100% - 40px), 420px);
    padding: 11px 16px;
    color: var(--white);
    font-size: 0.8rem;
    font-weight: 750;
    line-height: 1.4;
    text-align: center;
    background: rgba(67, 35, 45, 0.94);
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(50, 18, 29, 0.25);
    transform: translateX(50%);
    animation: toast-in 0.2s ease both;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translate(50%, 8px);
    }

    to {
        opacity: 1;
        transform: translate(50%, 0);
    }
}

@media (max-width: 380px) {
    :root {
        --wheel-size: min(88vw, 348px);
    }

    .app-shell {
        padding-right: 11px;
        padding-left: 11px;
    }

    .code-card {
        padding: 15px;
    }

    .code-form__row {
        grid-template-columns: 1fr;
    }

    .button--verify {
        width: 100%;
    }

    .wheel-section {
        padding-right: 4px;
        padding-left: 4px;
    }

    .trust-card {
        padding-right: 4px;
        padding-left: 4px;
    }

    .trust-card > div {
        gap: 3px;
        padding-right: 3px;
        padding-left: 3px;
    }

    .trust-card > div > span {
        width: 23px;
        height: 23px;
        font-size: 0.75rem;
    }
}

@media (min-width: 700px) {
    .app-shell {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .wheel-rotor.is-spinning {
        transition-duration: 450ms !important;
    }
}

@media (forced-colors: active) {
    .wheel-frame,
    .draw-button,
    .button,
    .eligibility-badge {
        border: 2px solid ButtonText;
    }

    .wheel-pointer span {
        border-top-color: ButtonText;
    }
}

/* Text-based artwork stays readable and translatable on every device. */
[hidden] { display: none !important; }
.campaign-header__hero {
    display: grid;
    min-height: 180px;
    align-content: center;
    gap: 10px;
    padding: 26px 20px;
    margin: 12px auto 0;
    background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.8), transparent 42%), linear-gradient(135deg, #ffd4e0, #fff7eb 48%, #ffb4c9);
    border: 3px solid rgba(255,255,255,.85);
    border-radius: var(--radius-xl);
    box-shadow: 0 16px 45px rgba(117,27,56,.17), inset 0 0 0 1px rgba(255,255,255,.5);
}
.campaign-header__hero h1 {
    margin: 0;
    color: var(--pink-800);
    font-size: clamp(1.55rem, 6.7vw, 2.25rem);
    font-weight: 950;
    line-height: 1.28;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 0 rgba(255,255,255,.95), 0 4px 14px rgba(171,41,78,.12);
}
.campaign-header__spark { color: var(--pink-500); font-size: 1.3rem; letter-spacing: .4em; }
.campaign-header__eyebrow > [data-i18n] { color: inherit; font-size: inherit; }
.result-dialog__decoration {
    display: flex;
    min-height: 90px;
    align-items: center;
    justify-content: center;
    gap: 22px;
    padding: 16px 50px 22px;
    color: var(--pink-600);
    font-size: 2.7rem;
    background: radial-gradient(circle at 25% 18%, rgba(255,255,255,.9), transparent 35%), linear-gradient(135deg, #ffc2d3, var(--cream) 65%, #ffd2df);
}
.result-dialog__decoration span:nth-child(2) { color: var(--gold); font-size: 2rem; }
.result-dialog__body { padding-top: 8px; padding-bottom: 25px; }
.result-dialog h2, .info-dialog h2, .result-prize strong { overflow-wrap: anywhere; }
.result-actions { grid-template-columns: repeat(2, minmax(0,1fr)); }
.result-actions .button { min-width: 0; padding: 12px 9px; overflow-wrap: anywhere; }
#resultDoneButton { margin-top: 18px; }
.trust-card strong, .trust-card small { white-space: normal; overflow-wrap: anywhere; line-height: 1.35; }
.quick-nav span:last-child { overflow-wrap: anywhere; line-height: 1.25; }
.customer-service-cta__action { max-width: 30%; overflow-wrap: anywhere; }
@media (max-width: 380px) {
    .result-actions { grid-template-columns: 1fr; }
    .campaign-header__hero { padding: 24px 15px; min-height: 170px; }
    .trust-card > div { flex-direction: column; text-align: center; }
}

body.modal-open .skip-link { visibility: hidden; }

/* Layout follows the browser language; draw and redemption codes keep their exact order. */
.result-prize, .info-dialog__content { text-align: start; }
.result-prize > div, .prize-list li > div { min-width: 0; }
.trust-card > div + div { border-left: 0; border-inline-start: 1px dashed var(--pink-200); }
.quick-nav button + button::before, .quick-nav button + a::before { left: auto; inset-inline-start: 0; }
.modal__close { right: auto; inset-inline-end: 10px; }
#redemptionCode { direction: ltr; unicode-bidi: isolate; }
#resultPrizeName, .prize-list strong { unicode-bidi: plaintext; }
html[dir="rtl"] #lotteryCode { text-align: right; }
html[dir="rtl"] .campaign-header__eyebrow,
html[dir="rtl"] .campaign-header__subtitle,
html[dir="rtl"] .result-dialog__eyebrow,
html[dir="rtl"] .wheel-section__kicker { letter-spacing: normal; }
html[lang="th"] .campaign-header__eyebrow,
html[lang="hi"] .campaign-header__eyebrow { letter-spacing: normal; }

/* Premium H5 poster: abstract devices, real HTML copy, and an unobstructed draw flow. */
:root {
    --pink-950: #1e2145;
    --pink-900: #353163;
    --pink-800: #4b4385;
    --pink-700: #655bc1;
    --pink-600: #7b70d2;
    --pink-500: #9585e9;
    --pink-400: #b2a3f5;
    --pink-300: #c9bff9;
    --pink-200: #dcd5ec;
    --pink-100: #ece8f5;
    --pink-50: #f6f3fc;
    --cream: #fffbf3;
    --cream-deep: #f3ead8;
    --gold: #cda968;
    --gold-light: #f2dcac;
    --ink: #24243e;
    --muted: #72718b;
    --shadow-card: 0 12px 32px rgba(31,30,61,.11);
    --shadow-soft: 0 18px 48px rgba(31,30,61,.16);
    background: #efeaf5;
}
html { background: #efeaf5; }
body {
    background: radial-gradient(ellipse at 85% 4%, rgba(160,143,226,.22), transparent 32%), linear-gradient(180deg, #272443 0, #322b58 560px, #f0ebf5 960px, #f8f4ef 100%);
}
.app-shell { max-width: 560px; padding-top: calc(var(--safe-top) + 12px); padding-bottom: calc(var(--safe-bottom) + 102px); }
.campaign-header { padding-top: 0; }
.campaign-header::before, .campaign-header::after { display: none; }
.campaign-header__topline { grid-template-columns: minmax(0,1fr) 44px; gap: 10px; }
.campaign-header__topline-spacer { display: none; }
.campaign-header__eyebrow {
    justify-self: start;
    gap: 7px;
    padding: 5px 0;
    color: #e6dfed;
    border: 0;
    box-shadow: none;
    background: transparent;
    letter-spacing: .04em;
}
.campaign-header__eyebrow > span:first-child { color: var(--gold-light); }
.music-toggle { color: #f5dfaf; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.2); box-shadow: none; }
.music-toggle.is-playing { background: rgba(205,169,104,.18); }
.campaign-header__hero {
    position: relative;
    display: block;
    min-height: 0;
    margin-top: 9px;
    padding: 30px 22px 23px;
    overflow: hidden;
    color: #fffaf0;
    border: 1px solid rgba(232,221,255,.23);
    border-radius: 28px;
    background: radial-gradient(ellipse at 65% 42%, rgba(144,120,235,.35), transparent 48%), linear-gradient(145deg,#393267,#24243e 62%,#514572);
    box-shadow: 0 20px 50px rgba(11,11,34,.24), inset 0 1px 0 rgba(255,255,255,.09);
}
.campaign-header__hero h1 {
    position: relative;
    z-index: 2;
    max-width: 390px;
    margin: 9px auto 0;
    color: #fffaf0;
    font-size: clamp(1.8rem, 7.3vw, 2.5rem);
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: -.025em;
    text-shadow: none;
}
.poster-kicker { position: relative; z-index: 2; margin: 0; color: #e5c795; font-size: .64rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.campaign-header__subtitle { position: relative; z-index: 2; margin: 11px auto 0; color: #bcb5d6; font-size: .8rem; font-weight: 500; line-height: 1.55; text-shadow: none; }
.poster-orbit { position: absolute; width: 340px; height: 340px; border: 1px solid rgba(234,220,255,.12); border-radius: 50%; pointer-events: none; }
.poster-orbit--one { top: 80px; left: -120px; }
.poster-orbit--two { top: 165px; right: -150px; }
.poster-showcase { position: relative; width: min(100%,330px); height: 214px; margin: 15px auto 0; isolation: isolate; }
.poster-platform { position: absolute; z-index: -1; right: 2%; bottom: 7px; left: 2%; height: 31px; border: 1px solid rgba(202,185,241,.16); border-radius: 50%; background: radial-gradient(ellipse,rgba(185,158,245,.3),rgba(157,137,212,.06)); box-shadow: 0 4px 35px rgba(177,147,255,.13); }
.poster-device { position: absolute; overflow: hidden; border: 2px solid #c4bfd8; background: linear-gradient(140deg,#b9b3ce,#5f5d79 70%,#a29eb8); box-shadow: 8px 17px 24px rgba(8,8,23,.4), inset 1px 0 1px rgba(255,255,255,.6); }
.poster-device--phone { z-index: 4; bottom: 19px; left: 39%; width: 89px; height: 182px; padding: 5px; border-radius: 21px; transform: rotate(7deg); }
.poster-device--phone > span { display: block; width: 100%; height: 100%; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: radial-gradient(ellipse at 70% 20%,#e6cba2 0,transparent 40%), radial-gradient(ellipse at 10% 80%,#877adc 0,transparent 52%), linear-gradient(140deg,#51416d,#171a34 65%); }
.poster-device--phone > i { position: absolute; top: 11px; left: 50%; width: 29px; height: 6px; border-radius: 10px; background: #141421; transform: translateX(-50%); }
.poster-device--phone-back { z-index: 2; bottom: 20px; left: 17%; width: 81px; height: 167px; border-radius: 18px; transform: rotate(-12deg); }
.poster-device--phone-back > span { position: absolute; top: 13px; left: 11px; width: 19px; height: 19px; border: 4px solid #a29bb9; border-radius: 50%; background: #242335; box-shadow: 0 0 0 1px rgba(0,0,0,.35); }
.poster-device--tablet { z-index: 1; bottom: 23px; right: 8%; width: 110px; height: 147px; padding: 5px; border-radius: 12px; transform: rotate(14deg); }
.poster-device--tablet > span { display: block; height: 100%; border-radius: 7px; background: radial-gradient(ellipse at 70% 20%,#7771b7,transparent 60%),linear-gradient(160deg,#28324f,#15192e); }
.poster-spark { position: absolute; color: #dfc48c; }
.poster-spark--one { top: 10px; right: 8%; font-size: 1.5rem; }
.poster-spark--two { bottom: 49px; left: 3%; font-size: 1.25rem; }
.poster-prize-copy { position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.poster-prize-copy strong { font-size: 1.07rem; font-weight: 800; }
.poster-prize-copy > span { padding: 3px 6px; color: #ead2a9; font-size: .6rem; border: 1px solid rgba(230,206,164,.3); border-radius: 5px; }
.poster-caption { margin: 6px 0 0; color: #a5a0b9; font-size: .55rem; }
.poster-reward { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; margin-top: 17px; padding: 12px 8px; background: rgba(13,16,34,.25); border: 1px solid rgba(223,200,154,.23); border-radius: 13px; }
.poster-reward > span { color: #d3c9da; font-size: .7rem; }
.poster-reward > strong { color: #f1d49b; font-size: clamp(1.25rem,5.6vw,1.6rem); line-height: 1.1; overflow-wrap: anywhere; }
.poster-details-link { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%; margin-top: 16px; padding: 4px 0; color: #d7cdeb; font-size: .66rem; line-height: 1.4; border: 0; background: transparent; text-align: center; cursor: pointer; }
.poster-details-link > span:last-child { color: var(--gold-light); font-size: 1rem; }
.campaign-header__period { color: #d1c7e3; background: rgba(255,255,255,.08); }
.currency-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin: 14px 1px 0; padding: 13px 14px; color: #d7cfea; background: rgba(52,45,83,.92); border: 1px solid rgba(242,220,172,.14); border-radius: 15px; }
.currency-summary__icon { width: 25px; color: #e6c998; font-size: 1.4rem; text-align: center; }
.currency-summary__region { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 9px; min-width: 0; }
.currency-summary__region > small { font-size: .62rem; }
.currency-summary__region > strong { font-size: .72rem; color: #f0dda8; }
#currencyNote { width: 100%; margin: 0; color: #9f97b6; font-size: .55rem; line-height: 1.45; }
.code-card { margin-top: 15px; padding: 21px 20px; color: var(--ink); background: #fffbf3; border-color: #fff; border-radius: 23px; box-shadow: 0 16px 35px rgba(20,19,39,.16); }
.code-card::after { display: none; }
.section-heading__icon { width: 32px; height: 32px; color: #655288; border: 1px solid #e7ddc8; background: #f5efdf; box-shadow: none; }
.section-heading h2 { font-size: 1.05rem; }
.section-heading p { font-size: .71rem; line-height: 1.5; }
.code-form input { border-color: #ded8e7; background: #fff; border-radius: 11px; font-size: max(16px, 1rem); }
.button { border-radius: 11px; }
.button--verify, .button--primary { background: linear-gradient(135deg,#7666c4,#4e438c); box-shadow: 0 7px 16px rgba(72,57,129,.16); }
.button--secondary { color: #574731; background: linear-gradient(135deg,#f7e9c8,#ead19c); box-shadow: 0 7px 16px rgba(115,90,45,.13); }
.wheel-section { margin-top: 19px; padding-top: 20px; padding-bottom: 19px; background: radial-gradient(circle at 50% 48%,#fff9e8,transparent 58%),linear-gradient(145deg,#fdf9f1,#eeebf8); border: 1px solid rgba(255,255,255,.9); border-radius: 26px; }
.wheel-section__kicker { color: #978045; letter-spacing: .15em; }
.eligibility-badge { border-color: #ddd6e7; background: #fffaf2; }
.eligibility-badge[data-state="busy"] { background: #ede8f8; }
.wheel-frame { background: conic-gradient(from 0deg,#7161ae,#d3c5f0,#655697,#cfbaea,#7660ad); border-color: #d4b77e; box-shadow: 0 0 0 4px #4c416f,0 0 0 7px #ede2c8,0 18px 32px rgba(36,31,70,.2),inset 0 0 18px rgba(255,255,255,.3); }
.wheel-frame::before { opacity: .6; }
.wheel-rotor__surface { background: repeating-conic-gradient(from -22.5deg,rgba(123,101,49,.2) 0deg .7deg,transparent .7deg 45deg),conic-gradient(from -22.5deg,#fff8e7 0deg 45deg,#ded7ef 45deg 90deg,#fff8e7 90deg 135deg,#ded7ef 135deg 180deg,#fff8e7 180deg 225deg,#ded7ef 225deg 270deg,#fff8e7 270deg 315deg,#ded7ef 315deg 360deg); }
.wheel-slot__label { font-weight: 850; color: #322c54; text-shadow: none; overflow-wrap: anywhere; }
.wheel-slot--thanks .wheel-slot__label { color: #9184a8; }
.wheel-slot__heart { color: #a296b6; text-shadow: none; }
.draw-button { color: #fff8e7; background: radial-gradient(circle at 30% 15%,rgba(255,255,255,.16),transparent 30%),linear-gradient(160deg,#8472c8,#453c75); border-color: #eddbb4; box-shadow: 0 0 0 3px #8777b7,0 7px 17px rgba(43,31,77,.3),inset 0 -4px 10px rgba(12,11,38,.2); }
.wheel-pointer::before { background: linear-gradient(140deg,#f4e3bc,#ba9557); border-color: #fff7df; }
.wheel-pointer span { border-top-color: #b58f52; }
.wheel-light { background: #f0d99e; box-shadow: 0 0 12px 3px rgba(232,208,158,.6); }
.trust-card { padding-top: 15px; padding-bottom: 15px; background: rgba(255,251,243,.78); border-radius: 19px; box-shadow: none; }
.trust-card > div > span { color: #958254; background: #f3ecd9; border: 1px solid #e6dbc0; }
.customer-service-cta { position: relative; left: auto; bottom: auto; width: 100%; min-height: 65px; margin-top: 18px; padding: 13px 16px; color: #fff7e9; background: linear-gradient(130deg,#40365f,#29283f); border: 1px solid rgba(213,179,114,.42); border-radius: 17px; box-shadow: 0 8px 25px rgba(35,30,66,.14); animation: none; }
.customer-service-cta__indicator { width: 9px; height: 9px; background: #ccba81; border: 1px solid #eee1b9; box-shadow: 0 0 0 4px rgba(216,199,152,.1); }
.customer-service-cta__copy strong { font-size: .82rem; }
.customer-service-cta__copy small { color: #beb5ce; font-size: .62rem; }
.customer-service-cta__action { padding: 6px 8px; color: #eed8a5; background: rgba(230,200,138,.12); border: 1px solid rgba(230,200,138,.16); }
.quick-nav { min-height: 68px; background: rgba(255,252,246,.96); border-color: #fff; border-radius: 19px; box-shadow: 0 8px 25px rgba(28,24,48,.17); }
.quick-nav button, .quick-nav a { color: #625b77; font-size: .62rem; }
.quick-nav button > span:first-child, .quick-nav a > span:first-child { color: #7d6c9a; }
.quick-nav .quick-nav__support { color: #fffaf0; background: linear-gradient(135deg,#6e5a9e,#44385e); border-radius: 13px; box-shadow: none; animation: none; }
.quick-nav .quick-nav__online { color: #594831; background: #ecdaa8; font-size: .48rem; }
.campaign-footer { color: #857b93; padding-top: 23px; font-size: .63rem; }
.modal__backdrop { background: rgba(21,20,40,.75); }
.modal__dialog { border-color: #fffaf0; background: #fffbf3; box-shadow: 0 25px 75px rgba(16,15,35,.38); }
.modal__close { color: #54466e; border-color: #e4ddef; box-shadow: 0 5px 15px rgba(54,38,81,.1); }
.result-dialog__decoration { color: #bca371; background: radial-gradient(circle at 30% 20%,rgba(255,250,227,.8),transparent 50%),linear-gradient(130deg,#dfd4ee,#f7edd6); }
.result-dialog__decoration span:nth-child(2) { color: #a28752; }
.result-dialog__eyebrow { color: #9a824c; }
.result-dialog h2 { color: #50406f; }
.result-prize { background: #fff; border-color: #e4dcec; box-shadow: none; }
.redemption-block { background: linear-gradient(#f8f0df,#f8f0df) padding-box,repeating-linear-gradient(90deg,#cfb473 0 7px,transparent 7px 11px) border-box; }
.redemption-block strong { color: #625087; }
.result-prize img { background: #f7f3fa; }
.info-dialog__header { color: #b79a60; }
.prize-list li { border-color: #e7e0ed; background: #fff; }
.prize-list__placeholder { background: #f4eff8; }
.prize-list p, .prize-list__details { color: var(--muted); font-size: .74rem; line-height: 1.5; margin: 5px 0 0; }
.toast { background: rgba(41,36,61,.96); border-radius: 18px; }
@media (max-width:380px) {
    .campaign-header__hero { padding: 26px 16px 21px; }
    .poster-showcase { height: 196px; }
    .poster-device--phone { height: 168px; width: 82px; }
    .poster-device--phone-back { height: 151px; width: 74px; }
    .poster-device--tablet { height: 133px; width: 99px; }
    .poster-prize-copy strong { font-size: .95rem; }
    .poster-kicker { font-size: .58rem; }
    .code-card { padding: 18px 16px; }
    .currency-summary { padding: 11px 12px; }
}
html[dir="rtl"] .poster-kicker { letter-spacing: normal; }

.result-dialog__description { white-space: pre-line; }

.poster-start-link { position:relative; z-index:2; display:flex; align-items:center; justify-content:center; gap:12px; width:min(100%,240px); min-height:44px; margin:14px auto 0; padding:10px 16px; color:#40344e; font-size:.78rem; font-weight:850; line-height:1.35; text-decoration:none; background:linear-gradient(140deg,#f2dfaF,#d6b677); border:1px solid #fae9c3; border-radius:10px; box-shadow:0 5px 16px rgba(4,4,17,.16); }
.poster-start-link:focus-visible { outline:3px solid #fff4cf; outline-offset:3px; }
.poster-details-link { margin-top:11px; min-height:44px; touch-action:manipulation; }

.result-prize__illustration { display:block; margin-top:5px; color:#9891a3; font-size:.6rem; }
.currency-summary__region > strong { min-width:0; overflow-wrap:anywhere; text-align:end; }

.result-prize-details { margin:11px auto 0; color:var(--muted); font-size:.73rem; line-height:1.6; white-space:pre-line; overflow-wrap:anywhere; }
.result-prize-details:empty { display:none; }
.provider-attribution { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:6px; margin-top:12px !important; color:#9a93a5; font-size:.58rem; line-height:1.5; }
.provider-attribution a { color:inherit; text-underline-offset:3px; }

/* Keep chart labels within their sectors while the surrounding text can grow. */
.wheel-slot__label { font-size: clamp(8.5px, calc(var(--wheel-size) * .027), 11.5px); }
.wheel-slot__heart { font-size: clamp(24px, calc(var(--wheel-size) * .085), 35px); }
.draw-button__main { font-size: clamp(21px, calc(var(--wheel-size) * .065), 28px); }
.draw-button__label { max-width: 92%; font-size: clamp(8.5px, calc(var(--wheel-size) * .027), 11px); line-height: 1.2; overflow-wrap: anywhere; }
.wheel-slot--unavailable .wheel-slot__image { filter: saturate(.3) drop-shadow(0 4px 4px rgba(103,35,53,.15)); }
.wheel-slot__availability { max-width: 110%; margin-top: 2px; padding: 1px 3px; color: #725938; font-size: clamp(6.5px, calc(var(--wheel-size) * .022), 8px); font-weight: 700; line-height: 1.15; text-align: center; overflow-wrap: anywhere; background: #f4e8ca; border-radius: 4px; }
.prize-list__availability { color: #8a4d30 !important; font-weight: 750; }

/* Reserve space for the navigation when the browser uses larger default text. */
.app-shell { padding-bottom: calc(var(--safe-bottom) + 6.5rem); }
.customer-service-cta { z-index: 1; }
html { scroll-padding-block-end: calc(var(--safe-bottom) + 6.5rem); }
.code-form input { scroll-margin-block: 45px calc(var(--safe-bottom) + 6.5rem); }
@media (max-width: 600px) and (max-height: 500px) {
    body:has(#lotteryCode:focus) .quick-nav { visibility: hidden; }
}
body.code-input-active .quick-nav { visibility: hidden; pointer-events: none; }

/* The charity flow uses the existing campaign palette and native support links. */
.poster-code-link { position: relative; z-index: 2; display: inline-block; max-width: 100%; margin-top: 8px; padding: 8px 4px; color: #d7cdeb; font-size: .72rem; line-height: 1.5; text-underline-offset: 3px; }
.poster-start-link { width: min(100%, 300px); }
.charity-flow { margin-top: 15px; padding: 20px; color: var(--ink); background: #fffbf3; border: 1px solid #fff; border-radius: 23px; box-shadow: var(--shadow-card); text-align: start; }
.charity-flow__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; margin: 17px 0 0; padding: 0; list-style: none; }
.charity-flow__steps li { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px 8px; background: #f3eff9; border: 1px solid #e6deed; border-radius: 11px; }
.charity-flow__steps li > span { display: grid; place-items: center; flex: 0 0 24px; width: 24px; height: 24px; color: #fffaf0; background: #655288; border-radius: 50%; font-size: .72rem; font-weight: 800; }
.charity-flow__steps strong { min-width: 0; font-size: .74rem; line-height: 1.5; overflow-wrap: anywhere; }
.charity-flow__note { margin: 14px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; }
.charity-claim-link { display: block; padding: 13px 10px 0; color: #4b4385; font-size: .76rem; font-weight: 750; line-height: 1.5; text-align: center; text-underline-offset: 4px; overflow-wrap: anywhere; }
.charity-claim-link:focus-visible, .poster-code-link:focus-visible { outline: 3px solid #9585e9; outline-offset: 3px; border-radius: 5px; }
@media (max-width: 380px) { .charity-flow { padding: 17px 15px; } .charity-flow__steps { gap: 9px 7px; } .charity-flow__steps li { padding: 9px 6px; gap: 6px; } }
@media (max-width: 320px) { .charity-flow__steps { grid-template-columns: 1fr; } }
@supports (height: 100dvh) {
    :root { --visible-viewport-height: 100dvh; }
}
@media (orientation: landscape) and (max-height: 500px) {
    .app-shell { padding-left: max(20px, var(--safe-left)); padding-right: max(20px, var(--safe-right)); }
    .modal { padding-block: max(10px, var(--safe-top)) max(10px, var(--safe-bottom)); }
    .modal__dialog { max-height: calc(var(--visible-viewport-height) - max(10px, var(--safe-top)) - max(10px, var(--safe-bottom))); }
    .quick-nav { width: min(calc(100% - max(24px, var(--safe-left) * 2) - max(24px, var(--safe-right) * 2)), 520px); }
    .result-dialog__decoration { min-height: 64px; padding-block: 10px; }
}

/* The close control stays on screen while the winning content scrolls. */
.modal-close-row { position: sticky; z-index: 10; top: 0; height: 0; pointer-events: none; }
.modal-close-row .modal__close { pointer-events: auto; }
.info-dialog { display: flex; flex-direction: column; overflow: hidden; }
.info-dialog > .modal-close-row { flex: 0 0 0; margin: -25px -20px 25px; }
.info-dialog__header, .info-dialog > .button { flex-shrink: 0; }
.info-dialog__header { min-width: 0; padding-inline-start: 0; padding-inline-end: 42px; }
.info-dialog__header > span { display: none; }
.info-dialog__header h2 { min-width: 0; max-width: 100%; text-wrap: balance; }
.info-dialog__content { flex: 1 1 auto; min-height: 0; max-height: none; }
.wheel-section__heading > div { min-width: 0; }
.wheel-section__heading h2 { overflow-wrap: anywhere; }

/* Top poster only: the previously approved pale-pink charity preview. */
.campaign-header__hero--charity {
    padding: 29px 22px 20px;
    color: #43232d;
    background: linear-gradient(180deg, #ffe8ef 0%, #fff5f7 60%, #fffaf6 100%);
    border-color: #f2dce4;
    border-radius: 30px;
    box-shadow: 0 14px 46px #6c28451a;
}
.campaign-header__hero--charity > .poster-kicker { color: #ce365d; font-size: .65rem; letter-spacing: .1em; }
.campaign-header__hero--charity h1 { color: #43232d; font-size: clamp(1.7rem, 6.8vw, 2.2rem); line-height: 1.35; letter-spacing: -.02em; text-wrap: balance; }
.campaign-header__hero--charity .campaign-header__subtitle { max-width: 390px; margin-top: 10px; color: #81626c; font-size: .8rem; line-height: 1.65; text-wrap: balance; }
.campaign-header__hero--charity .poster-showcase--charity { width: min(100%, 306px); height: 172px; margin: 19px auto 0; }
.campaign-header__hero--charity .poster-heart-ring { position: absolute; inset: 43px 7px 21px; border: 1.5px solid #f7cbd8; border-radius: 50%; transform: rotate(-13deg); }
.campaign-header__hero--charity .poster-heart { position: absolute; z-index: 1; top: 0; left: calc(50% - 72px); width: 144px; height: 137px; overflow: visible; filter: drop-shadow(0 10px 10px #bb42682d); transform: rotate(-8deg); }
.campaign-header__hero--charity .poster-charity-ticket { position: absolute; z-index: 2; right: 29px; bottom: 19px; left: 29px; display: flex; align-items: center; justify-content: center; gap: 13px; min-height: 46px; padding: 11px 13px; color: #c48c49; background: #fffaf2; border: 1px solid #f3d5b7; border-radius: 11px; box-shadow: 0 5px 14px #bb426813; transform: rotate(-4deg); }
.campaign-header__hero--charity .poster-charity-ticket span { font-size: .66rem; font-weight: 800; letter-spacing: .16em; }
.campaign-header__hero--charity .poster-spark--one { top: 15px; right: auto; left: 5px; color: #d99b3f; font-size: 1.3rem; }
.campaign-header__hero--charity .poster-spark--two { top: 30px; right: 0; bottom: auto; left: auto; color: #ee9ab7; font-size: 1.9rem; }
.campaign-header__hero--charity .poster-spark--three { right: 6px; bottom: 14px; color: #d99b3f; font-size: .9rem; }
.campaign-header__hero--charity .poster-start-link { width: 100%; min-height: 48px; margin-top: 4px; padding: 12px 16px; color: #fff; background: #ce365d; border-color: #ce365d; border-radius: 12px; box-shadow: 0 6px 18px #ce365d28; font-size: .8rem; line-height: 1.5; }
.campaign-header__hero--charity .poster-start-link:hover { background: #b92e52; }
.campaign-header__hero--charity .poster-start-link:focus-visible { outline-color: #ce365d; }
.campaign-header__hero--charity .poster-code-link { margin-top: 6px; padding: 9px 4px; color: #b13356; font-size: .73rem; }
.campaign-header__hero--charity .poster-featured-prize { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 12px; padding: 16px 13px 12px; text-align: start; background: #fff; border: 1px solid #f6e4ea; border-radius: 18px 18px 0 0; }
.campaign-header__hero--charity .poster-featured-prize__image { width: 42px; height: 62px; flex: 0 0 42px; object-fit: contain; }
.campaign-header__hero--charity .poster-featured-prize__copy { min-width: 0; }
.campaign-header__hero--charity .poster-featured-prize .poster-kicker { margin: 0 0 5px; color: #ce365d; font-size: .58rem; letter-spacing: .04em; }
.campaign-header__hero--charity .poster-prize-copy { justify-content: flex-start; gap: 7px; margin-top: 0; }
.campaign-header__hero--charity .poster-prize-copy strong { color: #43232d; font-size: .9rem; overflow-wrap: anywhere; }
.campaign-header__hero--charity .poster-prize-copy > span { color: #a65b73; background: #fff5f7; border-color: #f2dce4; }
.campaign-header__hero--charity .poster-caption { margin-top: 4px; color: #947581; font-size: .55rem; }
.campaign-header__hero--charity .poster-reward { justify-content: space-between; gap: 8px; margin-top: 0; padding: 10px 15px 12px; background: #fff; border: 1px solid #f6e4ea; border-top: 1px dashed #f2dce4; border-radius: 0 0 18px 18px; }
.campaign-header__hero--charity .poster-reward > span { color: #81626c; font-size: .66rem; }
.campaign-header__hero--charity .poster-reward > strong { color: #ce365d; font-size: 1.13rem; }
.campaign-header__hero--charity .poster-details-link { width: 100%; margin-top: 8px; color: #b13356; font-size: .64rem; }
.campaign-header__hero--charity .poster-details-link > span:last-child { color: #ce365d; }
.campaign-header__hero--charity .poster-code-link:focus-visible, .campaign-header__hero--charity .poster-details-link:focus-visible { outline: 3px solid #ce365d; outline-offset: 3px; border-radius: 5px; }
@media (max-width: 380px) {
    .campaign-header__hero--charity { padding: 25px 16px 17px; }
    .campaign-header__hero--charity .poster-featured-prize { padding-inline: 10px; gap: 10px; }
    .campaign-header__hero--charity .poster-prize-copy strong { font-size: .82rem; }
}
html[dir="rtl"] .campaign-header__hero--charity .poster-prize-copy { justify-content: flex-start; }
html[lang="ar"] .campaign-header__hero--charity > .poster-kicker { letter-spacing: normal; }