/* Root theme design tokens */
:root {
    --bg-dark: #070b19;
    --bg-card: rgba(17, 24, 43, 0.75);
    --gold-glow: #ffd700;
    --gold-gradient: linear-gradient(135deg, #ffe066 0%, #f5b041 50%, #d35400 100%);
    --neon-blue: #00f2fe;
    --neon-red: #ff3366;
    --text-primary: #ffffff;
    --text-secondary: #8fa0dd;
    --border-color: rgba(255, 255, 255, 0.08);
}

/* Reset and basic setup */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Inter', sans-serif;
    -webkit-tap-highlight-color: transparent;
}

body {
    background-color: var(--bg-dark);
    color: var(--text-primary);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* H5 Single-screen Layout Container */
.h5-container {
    width: 100%;
    max-width: 480px;
    height: 100%;
    max-height: 920px;
    background: #070b19;
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 0 0 env(safe-area-inset-bottom) 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

/* Top Banner styling - displaying the full trophy with top-anchor and deep gradient fade */
.banner-section {
    position: relative;
    width: 100%;
    height: 35%; /* Taller height ratio to fully show the cup */
    min-height: 240px;
    overflow: hidden;
    background: #01040d;
}

.banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; /* Forces browser to display the top of the trophy */
}

.banner-overlay {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
}

.banner-fade-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 110px; /* Much taller fade area */
    background: linear-gradient(180deg, rgba(7, 11, 25, 0) 0%, rgba(7, 11, 25, 0.5) 40%, #070b19 100%);
    pointer-events: none;
    z-index: 2;
}

.live-badge {
    background: linear-gradient(90deg, #ff3366, #ff007f);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    font-family: 'Outfit', sans-serif;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    box-shadow: 0 0 10px rgba(255, 51, 102, 0.6);
    animation: pulse 1.8s infinite;
}

/* Floating Brand Badge outside of scroll container to avoid overflow cropping */
.brand-badge-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -30px; /* Overlap the banner bottom */
    position: relative;
    z-index: 10; /* Render on top of the banner and form */
    height: 60px;
    pointer-events: none;
}

.brand-logo {
    height: 60px; /* Larger logo size */
    max-width: 240px;
    object-fit: contain;
    filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.45)) drop-shadow(0 0 2px rgba(255, 255, 255, 0.3));
    pointer-events: auto;
}

/* Form Panel Body with overlap styling to remove gap */
.form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 30px 24px 0 24px; /* Padding top to clear the logo */
    margin-top: -30px; /* Seamless overlap over the banner */
    background: #070b19;
    border-radius: 28px 28px 0 0; /* Smooth rounded top */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 5;
    overflow-y: auto;
}

.main-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 24px;
    text-align: center;
    letter-spacing: -0.5px;
    background: linear-gradient(180deg, #ffffff 0%, #b0c4de 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.subtitle {
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
    margin-bottom: 16px;
}

/* Input Fields styling */
.input-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 14px;
}

.input-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-left: 2px;
}

#accountId {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    height: 44px;
    padding: 0 16px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#accountId:focus {
    outline: none;
    border-color: var(--gold-glow);
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    background: rgba(17, 24, 43, 0.95);
}

/* Team Selection cards with Logos */
.team-selector-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
    padding-left: 2px;
}

.team-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.team-card {
    background: var(--bg-card);
    border: 1.5px solid var(--border-color);
    border-radius: 16px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

.team-color-bar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
}

.team-color-bar.red {
    background: var(--neon-red);
}

.team-color-bar.blue {
    background: var(--neon-blue);
}

.team-logo-img {
    height: 52px;
    width: 52px;
    object-fit: contain;
    margin-bottom: 10px;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.15));
}

.team-name {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: #fff;
}

/* Active card classes */
.team-card.selected.arsenal {
    border-color: var(--neon-red);
    box-shadow: 0 0 15px rgba(255, 51, 102, 0.3);
    background: rgba(255, 51, 102, 0.06);
}

.team-card.selected.psg {
    border-color: var(--neon-blue);
    box-shadow: 0 0 15px rgba(0, 242, 254, 0.3);
    background: rgba(0, 242, 254, 0.06);
}

.check-indicator {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.2s ease;
}

.team-card.selected .check-indicator {
    border-color: transparent;
}

.team-card.selected.arsenal .check-indicator {
    background: var(--neon-red);
}

.team-card.selected.psg .check-indicator {
    background: var(--neon-blue);
}

.team-card.selected .check-indicator::after {
    content: "";
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Action buttons: Disabled & Active states */
.submit-btn {
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--gold-gradient);
    color: #070b19;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.5px;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(245, 176, 65, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    line-height: 1.2;
}

.btn-text {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 15px;
}

.btn-countdown {
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
    margin-top: 2px;
    letter-spacing: 0.3px;
    font-family: 'Inter', sans-serif;
}

.submit-btn:disabled {
    background: #232a3d;
    color: #616a8a;
    box-shadow: none;
    cursor: not-allowed;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.submit-btn.active-glow {
    animation: buttonGlow 2.2s infinite;
}

@keyframes buttonGlow {
    0% { box-shadow: 0 4px 15px rgba(245, 176, 65, 0.35); }
    50% { box-shadow: 0 4px 28px rgba(255, 215, 0, 0.75); }
    100% { box-shadow: 0 4px 15px rgba(245, 176, 65, 0.35); }
}

.submit-btn:hover:not(:disabled) {
    transform: scale(1.02);
    box-shadow: 0 6px 24px rgba(245, 176, 65, 0.5);
}

.submit-btn:active:not(:disabled) {
    transform: scale(0.98);
}

.share-trigger-btn {
    width: 100%;
    height: 44px;
    border: 1.5px dashed rgba(255, 215, 0, 0.3);
    border-radius: 14px;
    background: transparent;
    color: var(--gold-glow);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.share-trigger-btn:hover {
    background: rgba(255, 215, 0, 0.05);
    border-color: var(--gold-glow);
}

.share-arrow {
    font-size: 14px;
}

/* Inline social media icons at the bottom of form */
.main-share-socials {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 12px;
}

.social-mini-icons {
    display: flex;
    gap: 12px;
    justify-content: center;
    align-items: center;
}

.mini-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mini-icon:hover {
    transform: scale(1.1);
}

.mini-icon:active {
    transform: scale(0.9);
}

/* Footer note */
.footer-note {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
}

/* Modal and Drawer Styles */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100;
    display: flex;
    align-items: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content.drawer {
    width: 100%;
    max-height: 85%;
    background: #0f1629;
    border-radius: 24px 24px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .modal-content.drawer {
    transform: translateY(0);
}

.drawer-header {
    height: 60px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.drawer-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #fff;
}

.close-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 24px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Poster preview and controls */
.poster-preview-container {
    width: 100%;
    max-width: 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.generated-poster {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.05);
    aspect-ratio: 2 / 3;
    object-fit: contain;
}

.save-tip {
    font-size: 11px;
    color: #25d366;
    margin-top: 8px;
    letter-spacing: 0.5px;
    font-weight: bold;
}

.double-chance-tip {
    font-size: 11px;
    color: var(--gold-glow);
    margin-top: 4px;
    text-align: center;
    font-weight: bold;
    animation: flash 2s infinite;
}

/* Social media panel */
.social-share-section {
    width: 100%;
}

.social-share-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-secondary);
    text-align: center;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.social-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px 8px;
    width: 100%;
}

.social-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.social-item span {
    font-size: 10px;
    color: var(--text-secondary);
    margin-top: 6px;
    text-align: center;
}

.social-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background-size: 22px;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.2s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-item:active .social-icon {
    transform: scale(0.9);
}

/* Inline SVGs for Social Medias */
.whatsapp-icon {
    background-color: #25d366;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg>');
}

.telegram-icon {
    background-color: #0088cc;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" fill="white"><path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm121.8 169.9l-40.7 191.8c-3 13.6-11.1 16.9-22.4 10.5l-62-45.7-29.9 28.8c-3.3 3.3-6.1 6.1-12.5 6.1l4.4-63.1 114.9-103.8c5-4.4-1.1-6.9-7.7-2.5l-142 89.4-61.2-19.1c-13.3-4.2-13.6-13.3 2.8-19.7l239.1-92.2c11.1-4 20.8 2.7 17.2 19.5z"/></svg>');
}

.facebook-icon {
    background-color: #1877f2;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.8 90.7 226.4 209.3 245V327.7h-63V256h63v-54.6c0-62.2 37-96.6 93.7-96.6 27.2 0 55.7 4.9 55.7 4.9v61.2h-31.3c-30.8 0-40.4 19.1-40.4 38.7V256h69.1l-11 71.7h-58.1V501C413.3 482.4 504 379.8 504 256z"/></svg>');
}

/* Instagram official brand pinkish-red logo color */
.instagram-icon {
    background-color: #E1306C;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.9c-41.4 0-75-33.6-75-75s33.6-75 75-75 75 33.6 75 75-33.6 75-75 75zm144.3-190.8c0 14.9-12 26.9-26.9 26.9s-26.9-12-26.9-26.9c0-14.9 12-26.9 26.9-26.9s26.9 12 26.9 26.9zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.8 9.9 67.6 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM402.4 397.7c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/></svg>');
}

.youtube-icon {
    background-color: #ff0000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512" fill="white"><path d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.485 42.867-11.485 131.917-11.485 131.917s0 89.054 11.485 131.917c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.485-42.863 11.485-131.917 11.485-131.917s0-89.05-11.485-131.917zM218.174 329.817V182.183L346.737 256l-128.563 73.817z"/></svg>');
}

.tiktok-icon {
    background-color: #000000;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="white"><path d="M448 209.91a210.06 210.06 0 0 1-122.77-39.25v178.72A162.55 162.55 0 1 1 185 188.31v89.89a72.69 72.69 0 1 0 52.23 69.89V0h88a121.18 121.18 0 0 0 1.86 22.32A121.55 121.55 0 0 0 448 109V210z"/></svg>');
}

.snapchat-icon {
    background-color: #fffc00;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="black"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm14.7 348.6c-13 1.9-26.6 2.9-40.7 2.9-14 0-27.7-.9-40.7-2.9-10.4-1.6-19.1-8.1-23.7-17.5-6.5-13.4-1.3-30.8 11.8-37.4 10.9-5.5 24.3-8.8 38.6-9.6-18-9-33.3-24.1-41.9-43-1.6-3.5-3.3-7.5-4.8-11.9-11.8-32.9.2-69.6 30.6-88.7 18.2-11.4 41.5-17.4 66.4-17.4 24.9 0 48.2 6 66.4 17.4 30.4 19.1 42.4 55.8 30.6 88.7-1.5 4.4-3.2 8.4-4.8 11.9-8.6 18.9-23.9 34-41.9 43 14.3.8 27.7 4.1 38.6 9.6 13.1 6.6 18.3 24 11.8 37.4-4.6 9.4-13.3 15.9-23.7 17.5z"/></svg>');
}

/* Toast component styles */
.toast-notification {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    background: rgba(15, 22, 41, 0.95);
    border: 1px solid var(--gold-glow);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    padding: 12px 20px;
    border-radius: 12px;
    z-index: 200;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    text-align: center;
    width: 85%;
    max-width: 380px;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.toast-notification.active {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* Animations */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 102, 0.6); }
    50% { transform: scale(1.05); box-shadow: 0 0 20px rgba(255, 51, 102, 0.9); }
    100% { transform: scale(1); box-shadow: 0 0 10px rgba(255, 51, 102, 0.6); }
}

@keyframes flash {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}