@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&family=ZCOOL+KuaiLe&family=Press+Start+2P&display=swap');

/* User Redeem Page Design System */
:root {
    --primary: #ff7ad9;
    --primary-hover: #ff5fc8;
    --primary-soft: #ffe3f2;
    --accent: #7aa7ff;

    --bg-main: #fdf6ff;
    --bg-surface: rgba(255, 255, 255, 0.92);

    --text-main: #2b2a3b;
    --text-muted: #6b6a86;
    --text-dim: #9a98b1;

    --border-base: #efe3f6;

    --success: #22c39a;
    --success-soft: #e7fbf6;
    --danger: #ff6b8a;
    --danger-soft: #ffe9ef;

    --shadow-sm: 0 6px 16px rgb(255 122 217 / 0.12);
    --shadow-md: 0 12px 28px rgb(124 90 255 / 0.15);
    --shadow-lg: 0 20px 40px rgb(124 90 255 / 0.18);

    --radius-md: 12px;
    --radius-lg: 18px;
    --radius-full: 9999px;

    --transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Nunito', 'Inter', -apple-system, BlinkMacSystemFont, inherit;
    background: radial-gradient(circle at top left, #ffe9f6 0%, rgba(255, 233, 246, 0) 45%),
        radial-gradient(circle at top right, #e9f0ff 0%, rgba(233, 240, 255, 0) 45%),
        linear-gradient(180deg, #fdf6ff 0%, #f4f7ff 100%);
    color: var(--text-main);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    line-height: 1.5;
    position: relative;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle at 20% 20%, rgba(255, 122, 217, 0.12) 0, transparent 35%),
        radial-gradient(circle at 80% 10%, rgba(122, 167, 255, 0.12) 0, transparent 35%),
        radial-gradient(circle at 40% 85%, rgba(255, 214, 246, 0.18) 0, transparent 40%);
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

.container {
    max-width: 480px;
    width: 100%;
}

.header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.header h1 {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}

.subtitle {
    font-size: 1rem;
    color: var(--text-muted);
}

.card {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-base);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: var(--shadow-lg);
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.card h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-align: center;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text-main);
}

.form-input {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border-base);
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: var(--transition-base);
    outline: none;
}

.form-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.form-help {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

.btn {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition-base);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
}

/* Toast */
.toast {
    position: fixed;
    top: 2rem;
    right: 2rem;
    padding: 1rem 1.5rem;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-base);
    display: none;
    z-index: 100;
}

.toast.show {
    display: block;
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.error {
    border-left: 4px solid var(--danger);
}

/* Steps */
.step {
    display: none;
}

.step.active {
    display: block;
}

/* Result */
.result-success {
    text-align: center;
}

.result-error {
    text-align: center;
}

.result-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.result-title {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.result-message {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.result-details {
    background-color: var(--bg-main);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: left;
    margin-bottom: 2rem;
}

.result-detail-item {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border-base);
}

.result-detail-item:last-child {
    border-bottom: none;
}

.result-detail-label {
    font-size: 0.875rem;
    color: var(--text-muted);
}

.result-detail-value {
    font-size: 0.875rem;
    font-weight: 600;
}

/* Mobile Responsiveness */
@media (max-width: 480px) {
    body {
        padding: 1rem;
    }

    .header {
        margin-bottom: 1.5rem;
    }

    .header h1 {
        font-size: 1.5rem;
    }

    .card {
        padding: 1.5rem;
    }

    .toast {
        left: 1rem;
        right: 1rem;
        top: 1rem;
    }

    .result-title {
        font-size: 1.25rem;
    }
}
/* Anime-glass theme overrides */
.header h1,
.card h2,
.result-title {
    font-family: 'ZCOOL KuaiLe', 'Nunito', sans-serif;
    letter-spacing: 0.02em;
}

.card,
.toast {
    background-color: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(14px);
    border-color: rgba(255, 122, 217, 0.2);
    box-shadow: var(--shadow-md);
}

.btn-primary {
    background: linear-gradient(135deg, #ff7ad9 0%, #8aa2ff 100%);
}

.btn-primary:hover {
    background: linear-gradient(135deg, #ff5fc8 0%, #6f8cff 100%);
    transform: translateY(-2px);
    box-shadow: 0 12px 24px rgba(255, 122, 217, 0.25);
}

/* Pixel theme overrides */
.header h1,
.card h2,
.result-title {
    font-family: 'Press Start 2P', 'ZCOOL KuaiLe', 'Nunito', sans-serif;
    font-size: 1rem;
}

.btn,
.card,
.form-input,
.toast {
    border-radius: 0 !important;
}

.btn {
    box-shadow: 3px 3px 0 rgba(42, 30, 80, 0.35);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card,
.toast {
    border: 2px solid rgba(42, 30, 80, 0.25);
}

/* Modal (announcement) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(10, 10, 20, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 1000;
}

.modal {
    width: 100%;
    max-width: 520px;
    background: rgba(255, 255, 255, 0.94);
    border: 2px solid rgba(42, 30, 80, 0.35);
    box-shadow: 6px 6px 0 rgba(42, 30, 80, 0.35);
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid rgba(42, 30, 80, 0.2);
    background: rgba(255, 122, 217, 0.08);
}

.modal-body {
    padding: 1.25rem;
}

.modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.announcement-content h1,
.announcement-content h2,
.announcement-content h3 {
    font-family: 'Press Start 2P', 'ZCOOL KuaiLe', sans-serif;
    font-size: 0.9rem;
}

.announcement-content p,
.announcement-content li {
    font-size: 0.9rem;
    line-height: 1.6;
}

/* Flat + sticker theme overrides (no gradients) */
body {
    background: #f7f7fb !important;
}
body::before {
    background-image: none !important;
}

.btn-primary {
    background: #ff8acb !important;
}

/* Sticker floating layer */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><circle cx='60' cy='60' r='48' fill='%23ffe1f1' stroke='%23ff8acb' stroke-width='4'/><circle cx='45' cy='55' r='6' fill='%23333'/><circle cx='75' cy='55' r='6' fill='%23333'/><path d='M45 75 Q60 88 75 75' stroke='%23333' stroke-width='4' fill='none' stroke-linecap='round'/><circle cx='38' cy='45' r='6' fill='%23ffd1e6'/><circle cx='82' cy='45' r='6' fill='%23ffd1e6'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='110' height='110'><rect x='14' y='14' width='82' height='82' rx='18' fill='%23e9f0ff' stroke='%236a9bff' stroke-width='4'/><circle cx='48' cy='54' r='6' fill='%23333'/><circle cx='72' cy='54' r='6' fill='%23333'/><path d='M48 74 Q60 84 72 74' stroke='%23333' stroke-width='4' fill='none' stroke-linecap='round'/><circle cx='36' cy='44' r='6' fill='%23c9d9ff'/><circle cx='84' cy='44' r='6' fill='%23c9d9ff'/></svg>");
    background-repeat: no-repeat;
    background-position: 8% 20%, 90% 24%;
    animation: stickerFloat 8s ease-in-out infinite;
    opacity: 0.9;
    z-index: 0;
}

@keyframes stickerFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.card,
.toast,
.modal {
    background-color: #ffffff !important;
}

/* Scheme B: handheld pixel theme (override) */
:root {
    --primary: #1f3a93;
    --primary-hover: #162e75;
    --primary-soft: #e4edff;
    --accent: #5bd1b6;
    --bg-main: #f2f1e6;
    --bg-surface: #fcfbf5;
    --text-main: #2c2f3a;
    --text-muted: #5a5f73;
    --border-base: #c9c7b5;
}

body {
    background: #f2f1e6 !important;
}

.btn-primary {
    background: #1f3a93 !important;
}

.btn-primary:hover {
    background: #162e75 !important;
}

/* Sticker float (cloud + speech bubble) */
body::after {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='90'><rect x='10' y='16' width='120' height='58' rx='12' fill='%23fcfbf5' stroke='%231f3a93' stroke-width='4'/><path d='M45 74 L58 74 L50 86 Z' fill='%23fcfbf5' stroke='%231f3a93' stroke-width='4'/><circle cx='46' cy='44' r='6' fill='%231f3a93'/><circle cx='70' cy='44' r='6' fill='%231f3a93'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='80'><ellipse cx='70' cy='40' rx='56' ry='26' fill='%23e4edff' stroke='%231f3a93' stroke-width='4'/><ellipse cx='40' cy='36' rx='24' ry='18' fill='%23e4edff' stroke='%231f3a93' stroke-width='4'/><ellipse cx='94' cy='34' rx='20' ry='16' fill='%23e4edff' stroke='%231f3a93' stroke-width='4'/></svg>");
    background-position: 8% 20%, 90% 24%;
}

/* Slime stickers (override) */
body::after {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='120'><path d='M20 90 Q25 40 70 34 Q115 40 120 90 Q120 110 20 110 Z' fill='%235bd1b6' stroke='%231f3a93' stroke-width='4'/><circle cx='52' cy='78' r='6' fill='%231f3a93'/><circle cx='88' cy='78' r='6' fill='%231f3a93'/><path d='M56 92 Q70 102 84 92' stroke='%231f3a93' stroke-width='4' fill='none' stroke-linecap='round'/></svg>"),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='100'><path d='M16 72 Q20 32 60 28 Q100 32 104 72 Q104 92 16 92 Z' fill='%239ee8d8' stroke='%231f3a93' stroke-width='4'/><circle cx='46' cy='64' r='5' fill='%231f3a93'/><circle cx='74' cy='64' r='5' fill='%231f3a93'/><path d='M50 78 Q60 86 70 78' stroke='%231f3a93' stroke-width='4' fill='none' stroke-linecap='round'/></svg>");
    background-position: 2% 12%, 98% 18%;
    opacity: 0.8;
}

.container {
    position: relative;
    z-index: 2;
}