/* ── GLASS ────────────────────────────────────────────────────────────
   The material: semi-transparent, so what is behind shows through, and
   blurred, so it reads as frosted rather than as a washed-out fill.

   WHAT USES WHAT, precisely. The attraction preview rect takes the whole
   recipe. The sign-in badge takes only --mdp-glass-top, the highlight —
   its tint has to stay page-dependent, because the same badge sits on
   near-black share pages and on the white download page, and an 86%-white
   fill would be a slab on the first. The lip is the part that is the same
   on both, and it is the part that makes either read as glass.

   The lighter TOP EDGE is the part that sells it. A 1px inset white
   highlight along the top is how light catches the lip of a piece of
   glass; without it a translucent panel reads as a flat tint.

   Consumers use these with a literal fallback — public/css/
   dp-attraction-card.css in particular must render correctly with no
   stylesheet but its own (see its header), so it repeats the values
   rather than depending on this file being present.
   ─────────────────────────────────────────────────────────────────── */
:root {
    --mdp-glass-bg: linear-gradient(180deg, rgba(255, 255, 255, .86) 0%, rgba(255, 255, 255, .64) 100%);
    --mdp-glass-blur: 18px;
    --mdp-glass-border: rgba(255, 255, 255, .55);
    --mdp-glass-top: rgba(255, 255, 255, .95);
    --mdp-glass-shadow: 0 8px 28px rgba(11, 11, 15, .18);
}

/* The utility, for anything that wants the material as-is. */
.mdp-glass {
    background: var(--mdp-glass-bg);
    -webkit-backdrop-filter: blur(var(--mdp-glass-blur)) saturate(160%);
    backdrop-filter: blur(var(--mdp-glass-blur)) saturate(160%);
    border: 1px solid var(--mdp-glass-border);
    box-shadow: inset 0 1px 0 var(--mdp-glass-top), var(--mdp-glass-shadow);
}

:root {
    --mdp-ui-ink-void: var(--ink-void, #0c0220);
    --mdp-ui-ink-deep: var(--ink-deep, #1a0633);
    --mdp-ui-royal: var(--royal, #6a1b9a);
    --mdp-ui-violet: var(--violet, #9d4edd);
    --mdp-ui-violet-bright: var(--violet-bright, #c77dff);
    --mdp-ui-pink: var(--pink, #ff3eb5);
    --mdp-ui-cyan: var(--cyan, #00e5ff);
    --mdp-ui-cyan-soft: var(--cyan-soft, #7df9ff);
    --mdp-ui-gold: var(--gold, #ffd166);
    --mdp-ui-gold-deep: var(--gold-deep, #f6a821);
    --mdp-ui-xp: var(--xp, #00f5a0);
    --mdp-ui-danger: var(--danger, #ff5a6a);
    --mdp-ui-heading: var(--heading, 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --mdp-ui-display: var(--display, 'Russo One', system-ui, -apple-system, BlinkMacSystemFont, sans-serif);
    --mdp-ui-body: var(--body, 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
    --mdp-ui-backdrop: rgba(0, 0, 0, 0.72);
    --mdp-ui-panel-bg:
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 30%),
        rgba(20, 12, 44, 0.85);
    --mdp-ui-panel-border: rgba(255,255,255,0.12);
    --mdp-ui-panel-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        0 40px 80px rgba(0,0,0,0.7);
}

.mdp-ui-panel {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01) 30%, transparent),
        rgba(18, 10, 38, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px 26px 26px;
    backdrop-filter: blur(22px) saturate(140%);
    -webkit-backdrop-filter: blur(22px) saturate(140%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.08) inset,
        0 24px 50px -18px rgba(0, 0, 0, 0.65);
}

.mdp-ui-panel--glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background:
        radial-gradient(circle at top left, rgba(255, 62, 181, 0.18), transparent 36%),
        radial-gradient(circle at top right, rgba(0, 229, 255, 0.16), transparent 34%),
        radial-gradient(circle at bottom center, rgba(255, 209, 102, 0.14), transparent 42%);
    filter: blur(24px);
    opacity: 0.85;
    pointer-events: none;
}

.mdp-ui-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    padding: 16px;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
    pointer-events: auto;
    background: var(--mdp-ui-backdrop);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.mdp-ui-modal.is-open,
.mdp-ui-modal.open,
.mdp-ui-modal.shown {
    display: flex;
}

.mdp-ui-modal-stack,
.badge-modal-stack {
    width: min(440px, calc(100% - 32px));
    /* auto vertical margins = safe centering: centered when the stack is
       shorter than the viewport, scrollable from the top when taller. */
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 24px;
}

.mdp-ui-modal-card,
.mdp-ui-modal .modal-content {
    box-sizing: border-box;
    width: min(500px, 100%);
    margin: auto;
    position: relative;
    padding: 0;
    border-radius: 20px;
    border: 1px solid var(--mdp-ui-panel-border);
    background: var(--mdp-ui-panel-bg);
    backdrop-filter: blur(28px) saturate(140%);
    -webkit-backdrop-filter: blur(28px) saturate(140%);
    box-shadow: var(--mdp-ui-panel-shadow);
    pointer-events: auto;
}

.mdp-ui-modal-card--glow {
    overflow: hidden;
}

.mdp-ui-modal-card--glow::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at top center, rgba(255, 62, 181, 0.12), transparent 38%),
        radial-gradient(circle at 18% 18%, rgba(0, 229, 255, 0.12), transparent 32%),
        radial-gradient(circle at 82% 18%, rgba(255, 209, 102, 0.12), transparent 32%);
}

.mdp-ui-modal-card--hanging,
.mdp-ui-modal .modal-content.badge-modal-content {
    width: 100%;
    margin: 0;
    padding: 130px 32px 28px;
    text-align: center;
    border-radius: 22px;
}

.mdp-ui-modal-card--dreamid {
    width: min(380px, 100%);
    padding: 28px;
    text-align: center;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,0.08), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,0.04), transparent 40%),
        linear-gradient(135deg, rgba(106, 27, 154, 0.96) 0%, rgba(74, 20, 140, 0.96) 100%);
}

/* ──────────────────────────────────────────────────────────
   Iframe modal variant — a reusable modal card sized to host
   an <iframe> body. Used anywhere we need to embed a sibling
   page (ticket checkout, etc.) inside a modal that matches
   the rest of the mydreampark UI.

   Markup expected inside the card:
     <header class="mdp-ui-modal-iframe-header"> ... </header>
     <iframe class="mdp-ui-modal-iframe"> ... </iframe>
   ────────────────────────────────────────────────────────── */
.mdp-ui-modal-card--iframe {
    width: min(880px, 100%);
    height: min(880px, calc(100vh - 32px));
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mdp-ui-modal-iframe-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 56px 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.mdp-ui-modal-iframe-title {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mdp-ui-modal-iframe-title .mdp-ui-modal-eyebrow {
    margin: 0;
}

.mdp-ui-modal-iframe-heading {
    margin: 0;
    color: #fff;
    font-family: var(--mdp-ui-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.mdp-ui-modal-iframe {
    flex: 1 1 auto;
    width: 100%;
    border: 0;
    display: block;
    background: transparent;
    color-scheme: dark;
}

@media (max-width: 720px) {
    .mdp-ui-modal-card--iframe {
        width: 100%;
        height: calc(100vh - 24px);
        border-radius: 16px;
    }
}

.mdp-ui-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mdp-ui-modal-header h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-family: var(--mdp-ui-heading);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.mdp-ui-modal-body {
    padding: 30px;
    text-align: center;
}

.mdp-ui-modal-crest,
.badge-modal-crest {
    width: 200px;
    height: 200px;
    margin: 0 0 -100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    pointer-events: none;
    border-radius: 50%;
}

.mdp-ui-modal-crest::before,
.badge-modal-crest::before {
    content: '';
    position: absolute;
    inset: -18px;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.75;
    filter: blur(20px);
    background: conic-gradient(from 0deg, var(--mdp-ui-gold), var(--mdp-ui-pink), var(--mdp-ui-cyan), var(--mdp-ui-violet-bright), var(--mdp-ui-gold));
    animation: mdp-ui-spin-ring 8s linear infinite;
}

.mdp-ui-modal-crest img,
.badge-modal-crest img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 18px 32px rgba(0,0,0,0.55));
}

.mdp-ui-modal-crest.mdp-ui-modal-crest--cover img {
    object-fit: cover;
}

.mdp-ui-modal-crest.is-placeholder,
.badge-modal-crest.is-placeholder {
    background: linear-gradient(180deg, var(--mdp-ui-violet-bright), var(--mdp-ui-royal));
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.35), 0 12px 28px rgba(0,0,0,0.5);
}

.mdp-ui-modal-crest.is-placeholder::after,
.badge-modal-crest.is-placeholder::after {
    content: '';
    width: 90px;
    height: 90px;
    color: #fff;
    opacity: 0.9;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L20 6 V11 C20 16.5 16.5 20.5 12 22 C7.5 20.5 4 16.5 4 11 V6 Z' fill='black'/></svg>") center/contain no-repeat;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2 L20 6 V11 C20 16.5 16.5 20.5 12 22 C7.5 20.5 4 16.5 4 11 V6 Z' fill='black'/></svg>") center/contain no-repeat;
}

.mdp-ui-close,
.badge-modal-close,
.mdp-ui-modal .close-btn {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    z-index: 3;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.mdp-ui-close-glyph {
    width: 14px;
    height: 14px;
    display: block;
}

.mdp-ui-close:hover,
.badge-modal-close:hover,
.mdp-ui-modal .close-btn:hover {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    transform: translateY(-1px);
}

.mdp-ui-modal-eyebrow,
.redeem-modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-display);
    font-size: 10px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

.mdp-ui-modal-eyebrow .icon,
.redeem-modal-eyebrow .icon {
    width: 14px;
    height: 14px;
}

.mdp-ui-modal-title,
.badge-modal-name {
    margin: 0 0 14px;
    color: #fff;
    font-family: var(--mdp-ui-heading);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.mdp-ui-modal-description,
.badge-modal-description {
    margin: 0 0 20px;
    min-height: 1em;
    color: rgba(255,255,255,0.85);
    font-size: 15px;
    line-height: 1.55;
}

.mdp-ui-modal-meta,
.badge-modal-meta {
    margin: 0 0 20px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: rgba(255,255,255,0.55);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
    letter-spacing: 0.02em;
}

.mdp-ui-status {
    min-height: 1.2em;
    margin: 0 0 14px;
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--mdp-ui-heading);
    font-size: 13px;
}

.mdp-ui-status.error {
    color: #ff8a93;
}

.mdp-ui-status.success {
    color: #b8ffd8;
}

.mdp-ui-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 102, 0.45);
    background: rgba(255, 209, 102, 0.12);
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-display);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.mdp-ui-badge-pill--danger {
    border-color: rgba(255, 90, 106, 0.4);
    background: rgba(255, 90, 106, 0.12);
    color: #ffd9dd;
}

.mdp-ui-badge-pill--cyan {
    border-color: rgba(0, 229, 255, 0.35);
    background: rgba(0, 229, 255, 0.12);
    color: var(--mdp-ui-cyan-soft);
}

/* ── UNIVERSAL ACTION BUTTON ────────────────────────────────────────
   Base = neutral transparent pill (DreamID silhouette).
   Variants opt in to color: --primary (gold), --purple, --danger. */
.mdp-ui-action,
.settings-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.85);
    /* Explicit font + height-related resets so the same variant renders
       identically across <a>, <button>, and <input type="submit"> — which
       otherwise inherit different UA defaults (font-size, line-height,
       padding, appearance) and end up subtly different heights. */
    font-family: var(--mdp-ui-heading);
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;
    transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.mdp-ui-action:hover,
.settings-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.32);
    transform: translateY(-1px);
}

.mdp-ui-action:active,
.settings-btn:active {
    transform: translateY(0);
    filter: brightness(0.96);
}

.mdp-ui-action svg,
.settings-btn svg {
    width: 16px;
    height: 16px;
}

/* Color variants — same shape & typography, opt in to a palette.
   Selectors use compound class (.mdp-ui-action.mdp-ui-action--primary)
   for higher specificity (0,0,2,0). This guards against any later
   single-class rule (e.g. an added .mdp-ui-action--lg, or a page-level
   override) accidentally winning the cascade and stripping the gold. */
.mdp-ui-action.mdp-ui-action--primary,
.settings-btn.primary,
.redeem-modal-cta {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
        linear-gradient(135deg, rgba(255, 209, 102, 0.78) 0%, rgba(246, 168, 33, 0.82) 100%),
        rgba(20, 12, 38, 0.35);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    color: #2a1a00;
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 12px 28px -10px rgba(246, 168, 33, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(80, 40, 0, 0.18);
}

.mdp-ui-action.mdp-ui-action--primary:hover,
.settings-btn.primary:hover,
.redeem-modal-cta:hover:not(:disabled):not(.is-locked) {
    color: #2a1a00;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 45%),
        linear-gradient(135deg, rgba(255, 219, 130, 0.85) 0%, rgba(246, 168, 33, 0.88) 100%),
        rgba(20, 12, 38, 0.35);
    filter: brightness(1.04);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow:
        0 18px 38px -10px rgba(246, 168, 33, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.62),
        inset 0 -1px 0 rgba(80, 40, 0, 0.22);
}

.mdp-ui-action--purple,
.settings-btn.purple {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 45%),
        linear-gradient(135deg, rgba(157, 78, 221, 0.7) 0%, rgba(74, 20, 140, 0.8) 100%),
        rgba(20, 12, 38, 0.4);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.24);
    box-shadow:
        0 12px 28px -10px rgba(74, 20, 140, 0.65),
        inset 0 1px 0 rgba(255, 255, 255, 0.28),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.mdp-ui-action--purple:hover,
.settings-btn.purple:hover {
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24) 0%, transparent 45%),
        linear-gradient(135deg, rgba(178, 100, 235, 0.78) 0%, rgba(90, 30, 160, 0.85) 100%),
        rgba(20, 12, 38, 0.4);
    filter: brightness(1.04);
    border-color: rgba(255, 255, 255, 0.32);
    box-shadow:
        0 18px 38px -10px rgba(74, 20, 140, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.mdp-ui-action--ghost,
.settings-btn.ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.mdp-ui-action--ghost:hover,
.settings-btn.ghost:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: none;
    filter: none;
}

.mdp-ui-action--danger,
.settings-btn.danger,
.badge-modal-remove {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, transparent 45%),
        linear-gradient(135deg, rgba(255, 90, 106, 0.72) 0%, rgba(201, 40, 65, 0.82) 100%),
        rgba(20, 12, 38, 0.4);
    backdrop-filter: blur(14px) saturate(170%);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.26);
    box-shadow:
        0 12px 28px -10px rgba(255, 90, 106, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 0.32),
        inset 0 -1px 0 rgba(0, 0, 0, 0.18);
}

.mdp-ui-action--danger:hover,
.settings-btn.danger:hover,
.badge-modal-remove:hover {
    color: #fff;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, transparent 45%),
        linear-gradient(135deg, rgba(255, 111, 127, 0.8) 0%, rgba(216, 52, 82, 0.88) 100%),
        rgba(20, 12, 38, 0.4);
    filter: brightness(1.04);
    border-color: rgba(255, 255, 255, 0.34);
    box-shadow:
        0 18px 38px -10px rgba(255, 90, 106, 0.78),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 0 rgba(0, 0, 0, 0.22);
}

.mdp-ui-action--pill,
.redeem-modal-cta,
.badge-modal-remove,
.mdp-ui-action--round {
    border-radius: 999px;
}

.mdp-ui-action--block {
    width: 100%;
}

/* Size modifier — hero-scale primary CTA. Same chrome rules as the base
   .mdp-ui-action, just upscaled for landing pages where the button is
   the page's focal element rather than an in-product action. Pair with
   any color variant (e.g. .mdp-ui-action.mdp-ui-action--primary.mdp-ui-action--lg). */
.mdp-ui-action--lg {
    min-height: 52px;
    padding: 0 28px;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 0.08em;
}
.mdp-ui-action--lg svg,
.mdp-ui-action--lg .mdp-ui-action-icon svg {
    width: 18px;
    height: 18px;
}

.badge-modal-remove {
    margin-top: 0;
    padding: 10px 18px;
    font-size: 12px;
    text-transform: uppercase;
}

/* Disabled state — strips color, falls back to neutral pill.
   Works for any variant (--primary, --purple, --danger). Apply via
   the disabled attribute, the .is-locked class (legacy), or
   .mdp-ui-action--disabled / .is-disabled for non-form elements. */
.mdp-ui-action:disabled,
.mdp-ui-action.is-disabled,
.mdp-ui-action--disabled,
.settings-btn:disabled,
.badge-modal-remove:disabled,
.redeem-modal-cta:disabled,
.redeem-modal-cta.is-locked {
    cursor: not-allowed;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 60%),
        rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: rgba(255, 255, 255, 0.4) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    transform: none !important;
    filter: none !important;
}

.mdp-ui-action:disabled:hover,
.mdp-ui-action.is-disabled:hover,
.mdp-ui-action--disabled:hover,
.settings-btn:disabled:hover,
.badge-modal-remove:disabled:hover,
.redeem-modal-cta:disabled:hover,
.redeem-modal-cta.is-locked:hover {
    transform: none !important;
    filter: none !important;
}

.redeem-modal-rarity {
    display: inline-block;
    margin: 0 0 12px;
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 102, 0.45);
    background: rgba(255, 209, 102, 0.12);
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-display);
    font-size: 9px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.redeem-modal-cost-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 320px;
    margin: 8px auto 18px;
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.06);
}

.redeem-modal-cost-row[hidden],
.redeem-modal-receipt[hidden],
.redeem-modal-rarity[hidden],
.redeem-modal-cta-coin[hidden] {
    display: none !important;
}

.redeem-modal-cost-label {
    color: rgba(255, 255, 255, 0.6);
    font-family: var(--mdp-ui-display);
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.redeem-modal-cost-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-heading);
    font-size: 18px;
    font-weight: 800;
}

.redeem-modal-cost-value svg,
.redeem-modal-cta-coin {
    width: 14px;
    height: 14px;
}

.redeem-modal-receipt {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 320px;
    margin: 8px auto 18px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255, 209, 102, 0.3);
    background: rgba(255, 209, 102, 0.06);
    color: rgba(255,255,255,0.78);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 12px;
}

.redeem-modal-receipt .row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.redeem-modal-receipt .row.cost {
    color: #ff8a93;
}

.redeem-modal-receipt .row.balance {
    color: var(--mdp-ui-gold);
    font-weight: 600;
}

.redeem-modal-receipt .row .amount {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.redeem-modal-receipt .row .amount svg {
    width: 12px;
    height: 12px;
}

.redeem-modal-cta {
    min-height: 44px;
    padding: 0 22px;
    gap: 8px;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.redeem-modal-cta:active:not(:disabled):not(.is-locked) {
    transform: translateY(0);
    filter: brightness(0.95);
}

.redeem-modal-cta.is-busy {
    cursor: progress;
    opacity: 0.85;
}

.mdp-ui-modal-actions {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.mdp-ui-link-action,
.picture-prompt-skip,
.resend-btn {
    padding: 8px 12px;
    border: 0;
    background: none;
    color: rgba(255, 255, 255, 0.65);
    cursor: pointer;
    font-family: var(--mdp-ui-heading);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mdp-ui-link-action:hover,
.picture-prompt-skip:hover,
.resend-btn:hover {
    color: #fff;
}

.mdp-ui-qr-frame {
    min-width: 240px;
    min-height: 240px;
    display: inline-grid;
    place-items: center;
    padding: 16px;
    border-radius: 14px;
    background: #fff;
}

.mdp-ui-qr-frame img {
    display: block;
    width: 220px;
    height: 220px;
}

.mdp-ui-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(74,20,140,0.2);
    border-top-color: #4a148c;
    border-radius: 50%;
    animation: mdp-ui-spin 0.9s linear infinite;
}

.dreamid-meta {
    margin-top: 14px;
    color: rgba(255,255,255,0.75);
    font-size: 13px;
}

.dreamid-error {
    min-height: 18px;
    margin-top: 12px;
    color: #ffcccb;
    font-size: 13px;
}

@keyframes mdp-ui-spin-ring {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

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

@media (max-width: 640px) {
    .mdp-ui-modal {
        padding: 12px;
        /* Center on mobile too (was flex-start, which pinned the badge /
           info modals to the top of the screen). The cards keep
           `margin: auto`, so content taller than the viewport still
           scrolls from the top instead of clipping. */
        align-items: center;
    }

    .mdp-ui-modal-card,
    .mdp-ui-modal .modal-content {
        border-radius: 16px;
    }

    .mdp-ui-modal-header {
        align-items: flex-start;
        padding: 16px;
    }

    .mdp-ui-modal-header h2 {
        font-size: 16px;
    }

    .mdp-ui-modal-body {
        padding: 20px 16px 22px;
    }
}

@media (max-width: 480px) {
    .mdp-ui-modal-stack,
    .badge-modal-stack {
        width: 100%;
    }

    .mdp-ui-modal-crest,
    .badge-modal-crest {
        width: 150px;
        height: 150px;
        margin: 0 0 -75px;
    }

    .mdp-ui-modal-card--hanging,
    .mdp-ui-modal .modal-content.badge-modal-content {
        padding: 95px 22px 24px;
    }

    .mdp-ui-modal-title,
    .badge-modal-name {
        font-size: 22px;
    }

    .mdp-ui-qr-frame {
        min-width: 220px;
        min-height: 220px;
        padding: 12px;
    }

    .mdp-ui-qr-frame img {
        width: 196px;
        height: 196px;
    }
}

.mdp-auth-shell {
    width: 100%;
}

.mdp-auth-shell.mdp-ui-panel {
    width: min(540px, 100%);
    max-width: 540px;
    margin: 0 auto;
    padding: 0;
}

.mdp-auth-shell--page {
    width: min(460px, 100%);
    max-width: 460px;
}

.mdp-auth-modal-card.mdp-ui-modal-card {
    width: min(560px, 100%);
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.mdp-auth-title {
    font-family: var(--mdp-ui-body);
    font-size: clamp(24px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    margin: 0 0 6px;
    text-align: center;
    will-change: opacity, transform, filter;
}

@keyframes mdp-auth-title-out {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
        filter: blur(3px);
    }
}

@keyframes mdp-auth-title-in {
    0% {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
        filter: blur(3px);
    }
    60% {
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.mdp-auth-title.is-fading-out {
    animation: mdp-auth-title-out 200ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.mdp-auth-title.is-fading-in {
    animation: mdp-auth-title-in 320ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.mdp-auth-header {
    display: block;
    text-align: center;
    padding: 32px 28px 8px;
    border-bottom: 0;
}

.mdp-auth-body {
    padding: 20px 28px 28px;
}

.mdp-auth-brand-lockup {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin: 0 auto 20px;
}

.mdp-auth-brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}

.mdp-auth-brand-name {
    color: #fff;
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1;
}

.mdp-auth-description {
    max-width: 38ch;
    margin: 0 auto;
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(235, 228, 245, 0.62);
    line-height: 1.5;
    text-align: center;
}

.mdp-auth-inline-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.18em;
    margin: 0 2px 0 4px;
}

/* ── Signup bonus hero ──────────────────────────────────────────────
   Renders inside the auth shell, but only when .mdp-auth-root--bonus
   is set. In that mode the whole panel goes gold (see the
   .mdp-auth-root--bonus block below) and this hero is chromeless —
   no border, no inner background, no nested glow. */
.mdp-signup-bonus {
    display: none;
    margin: 0 0 8px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    text-align: center;
}

.mdp-auth-root--bonus .mdp-signup-bonus {
    display: block;
}

.mdp-signup-bonus__eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 209, 102, 0.55);
    background: rgba(255, 209, 102, 0.16);
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-display);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(246, 168, 33, 0.45);
}

.mdp-signup-bonus__hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 14px 0 4px;
}

.mdp-signup-bonus__coin {
    display: inline-block;
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    /* Recolor the white DreamPoint SVG with the same gold gradient as the
       amount. Mask-image lets us paint the silhouette with whatever
       background we want — in this case the gold gradient — instead of
       being stuck with the source SVG's white fill. */
    background: linear-gradient(180deg, #fff5cf 0%, #ffd166 55%, #f6a821 100%);
    -webkit-mask: url('/dreampoint.svg') center / contain no-repeat;
            mask: url('/dreampoint.svg') center / contain no-repeat;
    filter:
        drop-shadow(0 6px 16px rgba(246, 168, 33, 0.55))
        drop-shadow(0 0 24px rgba(255, 209, 102, 0.35));
}

.mdp-signup-bonus__amount {
    font-family: var(--mdp-ui-heading);
    font-size: 64px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(180deg, #fff5cf 0%, #ffd166 55%, #f6a821 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 28px rgba(246, 168, 33, 0.35);
}

.mdp-signup-bonus__label {
    color: var(--mdp-ui-gold);
    font-family: var(--mdp-ui-display);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-shadow: 0 1px 6px rgba(246, 168, 33, 0.4);
}

.mdp-signup-bonus__title {
    margin: 14px 0 8px;
    color: #fff;
    font-family: var(--mdp-ui-heading);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.mdp-signup-bonus__body {
    margin: 0 auto;
    max-width: 38ch;
    color: rgba(255, 246, 220, 0.78);
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
}

.mdp-signup-bonus__caption {
    margin-top: 10px;
    color: rgba(255, 209, 102, 0.7);
    font-family: var(--mdp-ui-display);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* ── Bonus mode — paint the whole panel gold ────────────────────── */
.mdp-auth-root--bonus .mdp-auth-shell {
    border-color: rgba(255, 209, 102, 0.42);
    background:
        radial-gradient(circle at 50% -10%, rgba(255, 209, 102, 0.32), transparent 55%),
        radial-gradient(circle at 50% 110%, rgba(246, 168, 33, 0.18), transparent 60%),
        linear-gradient(180deg, rgba(255, 209, 102, 0.06), rgba(20, 12, 44, 0.88) 42%);
    box-shadow:
        inset 0 1px 0 rgba(255, 232, 178, 0.4),
        0 0 0 1px rgba(255, 209, 102, 0.22),
        0 32px 70px -22px rgba(246, 168, 33, 0.45),
        0 24px 50px -18px rgba(0, 0, 0, 0.65);
}

/* In bonus mode the bonus IS the hero — hide the generic title pair. */
.mdp-auth-root--bonus .mdp-auth-title,
.mdp-auth-root--bonus .mdp-auth-description {
    display: none;
}

.mdp-auth-root--bonus .mdp-auth-header {
    padding-bottom: 4px;
}

.mdp-auth-root--bonus .mdp-auth-brand-lockup {
    margin-bottom: 8px;
}

/* Signup-only — collapse the Sign In / Create Account tabs. */
.mdp-auth-root--bonus .mdp-auth-tabs {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    margin-bottom: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    pointer-events: none;
}

/* Tint the primary CTA gold so the whole panel reads as one offer. */
.mdp-auth-root--bonus [data-auth-submit="signup"] {
    background:
        linear-gradient(180deg, #ffe39b 0%, #ffc94a 55%, #f59e15 100%);
    color: #2a1500;
    border-color: rgba(255, 232, 178, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 14px 32px -14px rgba(246, 168, 33, 0.7);
    text-shadow: none;
}

.mdp-auth-root--bonus [data-auth-submit="signup"]:hover {
    filter: brightness(1.04);
}

.mdp-auth-tabs {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
    margin-bottom: 14px;
    padding: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    width: 100%;
    max-height: 80px;
    overflow: hidden;
    transition: opacity 200ms ease, transform 220ms ease, margin-bottom 240ms ease, max-height 260ms ease, padding 240ms ease, border-color 200ms ease;
}

.mdp-auth-root--success .mdp-auth-tabs,
.mdp-auth-root--notify  .mdp-auth-tabs {
    opacity: 0;
    transform: translateY(-6px) scale(0.98);
    margin-bottom: 0;
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-color: transparent;
    pointer-events: none;
}

.mdp-auth-root--success .mdp-auth-body {
    padding-top: 10px;
}

.mdp-auth-root--success .mdp-auth-body .mdp-ui-status {
    min-height: 0;
    margin: 0;
}

.mdp-auth-body .mdp-ui-status {
    min-height: 0;
    margin: 0;
}

.mdp-auth-body .mdp-ui-status.error,
.mdp-auth-body .mdp-ui-status.success {
    min-height: 1.2em;
    margin: 0 0 12px;
}

.mdp-auth-tab {
    min-height: 36px;
    padding: 0 14px;
    color: rgba(235, 228, 245, 0.6);
    background: transparent;
    border: 0;
    text-transform: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: none;
}

.mdp-auth-tab:hover {
    color: #fff;
    background: transparent;
    border-color: transparent;
    transform: none;
}

.mdp-auth-tab.is-active {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 1px 2px rgba(0,0,0,0.2);
}

.mdp-auth-body {
    text-align: left;
}

.mdp-auth-panels {
    position: relative;
    overflow: hidden;
    transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.mdp-auth-panel {
    display: none;
    opacity: 0;
    transition: opacity 200ms ease;
}

.mdp-auth-panel.is-active {
    display: block;
    opacity: 1;
}

.mdp-auth-success {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px 4px 4px;
    text-align: center;
}

.mdp-auth-success.is-active {
    display: flex;
}

.mdp-auth-success-spinner {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--mdp-ui-gold);
    animation: mdp-auth-success-fade-in 320ms ease both;
}

.mdp-auth-success-spinner svg {
    width: 100%;
    height: 100%;
    animation: mdp-auth-success-spin 0.85s linear infinite;
}

@keyframes mdp-auth-success-spin {
    to { transform: rotate(360deg); }
}

@keyframes mdp-auth-success-fade-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.mdp-auth-success-copy {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mdp-auth-success-headline {
    font-family: var(--mdp-ui-body);
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
}

.mdp-auth-success-sub {
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    color: rgba(235, 228, 245, 0.7);
}

.mdp-auth-success-sub [data-auth-success-countdown] {
    display: inline-block;
    min-width: 1ch;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #fff;
}

.mdp-auth-form {
    display: grid;
    gap: 14px;
}

/* ── BADGE TILE & ITEM TILE — shared inventory inspection chrome ──
   Mirrors the visual treatments from views/profile.ejs so any surface
   (home page MyDreamPark showcase, marketing pages, future inventory
   embeds) can render real-looking badges and items without inventing
   new chrome. A badge is the artwork itself with a rarity-tinted glow;
   an item is the artwork inside a dark glass square card.

   Rarity tiers for badges: r-l legendary (gold), r-e epic (violet),
   r-r rare (blue), r-u uncommon (green), r-c common (gray). */
.mdp-ui-badge-tile {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}
.mdp-ui-badge-tile.is-static { cursor: default; }
.mdp-ui-badge-tile:not(.is-static):hover { transform: scale(1.06); }
.mdp-ui-badge-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.5));
}
.mdp-ui-badge-tile.r-l .mdp-ui-badge-img { filter: drop-shadow(0 0 12px rgba(255, 209, 102, 0.85)) drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.mdp-ui-badge-tile.r-e .mdp-ui-badge-img { filter: drop-shadow(0 0 12px rgba(199, 125, 255, 0.7))  drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.mdp-ui-badge-tile.r-r .mdp-ui-badge-img { filter: drop-shadow(0 0 12px rgba( 88, 166, 255, 0.7))  drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.mdp-ui-badge-tile.r-u .mdp-ui-badge-img { filter: drop-shadow(0 0 12px rgba( 77, 208, 158, 0.65)) drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }

.mdp-ui-item-tile {
    position: relative;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(8, 3, 24, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.18s ease, transform 0.15s ease;
}
.mdp-ui-item-tile.is-clickable { cursor: pointer; }
.mdp-ui-item-tile.is-clickable:hover {
    border-color: rgba(255,255,255,0.25);
    background: rgba(20, 10, 48, 0.65);
    transform: translateY(-2px);
}
.mdp-ui-item-tile.is-selected {
    border-color: var(--mdp-ui-gold);
    border-width: 2px;
    background: rgba(255, 209, 102, 0.06);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 1px rgba(255, 209, 102, 0.25),
        0 0 24px rgba(255, 209, 102, 0.35);
}
.mdp-ui-item-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mdp-ui-item-image img {
    width: 75%;
    height: 75%;
    object-fit: contain;
    filter: drop-shadow(0 6px 8px rgba(0,0,0,0.45));
}

/* Progressive disclosure inside an auth form — used by the notify flow
   to reveal the password fields as soon as the user starts typing their
   zip. Composes any number of children inside the wrapper; collapses
   completely (including its own gap with siblings) when hidden. */
.mdp-auth-reveal {
    display: grid;
    gap: 14px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    margin-top: -14px; /* collapses the form's grid gap when hidden */
    transition:
        max-height 360ms cubic-bezier(0.4, 0, 0.2, 1),
        opacity 220ms ease,
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        margin-top 320ms cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.mdp-auth-reveal.is-revealed {
    max-height: 480px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 0;
    pointer-events: auto;
}

.mdp-auth-field {
    display: grid;
    gap: 6px;
}

.mdp-auth-label {
    color: rgba(255,255,255,0.78);
    font-family: var(--mdp-ui-body);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.mdp-auth-input {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    font-family: var(--mdp-ui-body);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.mdp-auth-input::placeholder {
    color: rgba(235, 228, 245, 0.35);
    font-weight: 400;
}

.mdp-auth-input:hover {
    border-color: rgba(255,255,255,0.22);
    background: rgba(255, 255, 255, 0.06);
}

.mdp-auth-input:focus {
    outline: none;
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.15);
    background: rgba(255, 255, 255, 0.06);
}

.mdp-auth-help {
    color: rgba(235, 228, 245, 0.5);
    font-family: var(--mdp-ui-body);
    font-size: 12px;
    line-height: 1.5;
    margin-top: 2px;
}

.mdp-auth-footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    font-weight: 400;
    color: rgba(235, 228, 245, 0.62);
}

.mdp-auth-switch {
    padding: 0;
    font-family: var(--mdp-ui-body);
    font-size: 14px;
    font-weight: 500;
    color: var(--mdp-ui-gold);
}

.mdp-auth-switch:hover {
    color: #fff;
}

.mdp-auth-loading {
    display: none;
}

.mdp-auth-loading.is-visible {
    display: block;
}

.mdp-auth-portrait {
    display: none;
    margin-bottom: 18px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    text-align: center;
}

.mdp-auth-portrait.is-visible {
    display: block;
}

.mdp-auth-portrait-badge {
    margin-bottom: 10px;
}

.mdp-auth-portrait-frame {
    width: 108px;
    height: 108px;
    margin: 0 auto;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 14px 28px rgba(0,0,0,0.32);
}

.mdp-auth-portrait-frame img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 50%;
}

.mdp-auth-portrait-note {
    margin-top: 10px;
    color: rgba(235, 228, 245, 0.68);
    font-size: 13px;
    line-height: 1.45;
}

.mdp-auth-page {
    position: relative;
    /* True one-pager: the class sits on <body>, so kill the UA margin and
       count the padding INSIDE the viewport height instead of on top of it
       (margin 16 + padding 72 was a constant 88px of phantom scroll). dvh
       tracks the real visual viewport under mobile browser chrome. */
    margin: 0;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 36px 18px;
    background: #0b0617;
    isolation: isolate;
}

/* Short viewports (SE-class phones, small landscape windows): slim the
   page gutter so the panel clears the viewport without scrolling. */
@media (max-height: 700px) {
    .mdp-auth-page {
        padding-top: 14px;
        padding-bottom: 14px;
    }
}

.mdp-auth-page::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url('/backgrounds/background-sal-1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.mdp-auth-page-back {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 3;
}

@media (max-width: 640px) {
    .mdp-auth-header {
        padding: 24px 20px 8px;
    }

    .mdp-auth-body {
        padding: 16px 20px 24px;
    }

    .mdp-auth-brand-logo {
        width: 44px;
        height: 44px;
    }

    .mdp-auth-title {
        font-size: 22px;
    }

    .mdp-auth-tab {
        min-height: 38px;
    }

    .mdp-signup-bonus__coin {
        width: 52px;
        height: 52px;
    }

    .mdp-signup-bonus__amount {
        font-size: 52px;
    }

    .mdp-signup-bonus__title {
        font-size: 20px;
    }
}