/* ═══════════════════════════════════════════════════════════ DESIGN TOKENS To add a second skin, override these variables on a selector such as [data-theme="light"] and toggle the attribute on via JS. ═══════════════════════════════════════════════════════════ */ :root { --main-dark: #00061B; --main-light: #011338; --text-colour: white; --border: #05173a; --accent: #e8c84a; --accent-subtle: rgba(232, 200, 74, 0.2); --accent-glow: rgba(232, 200, 74, 0.5); --accent-gold: #e8c84a; --overlay-bg: rgba(3, 2, 19, 0.3); } /* ═══════════════════════════════════════════════════════════ BASE ═══════════════════════════════════════════════════════════ */ body { margin: 0; font-family: 'Nunito Sans', sans-serif; background-image: url('images/wembley-dark.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; } label { cursor: pointer; } .hidden { display: none !important; } /* ═══════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════ */ header { position: relative; height: 80px; background-color: var(--main-dark); padding: 20px; color: var(--text-colour); text-align: center; font-size: 24px; font-weight: bold; display: flex; align-items: center; justify-content: center; } .skin-nav { position: absolute; top: 50%; right: 20px; transform: translateY(-50%); } .skin-toggle { background: transparent; color: var(--text-colour); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 2px; padding: 11px 16px; font-size: 13px; font-family: inherit; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; opacity: 0.6; } .skin-toggle:hover { opacity: 1; } .skin-dropdown { position: absolute; top: calc(100% + 6px); right: 0; background: var(--main-dark); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; min-width: 160px; z-index: 2000; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5); } .skin-option { display: block; width: 100%; text-align: left; background: transparent; color: var(--text-colour); border: none; padding: 11px 16px; font-size: 13px; font-family: inherit; cursor: pointer; font-weight: 600; letter-spacing: 0.5px; } .skin-option:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); } .wembley-logo { height: 74px; max-height: 74px; } /* ═══════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════ */ .container { margin: 65px auto; padding: 40px; max-width: 900px; min-width: 350px; text-align: center; } .match-area { padding: 40px; display: flex; justify-content: space-around; align-items: center; border-radius: 4px; color: var(--text-colour); font-weight: bold; min-width: 300px; } .teams { display: flex; justify-content: space-between; width: 100%; align-items: center; margin-bottom: 10px; } /* ═══════════════════════════════════════════════════════════ TEAM PANEL ═══════════════════════════════════════════════════════════ */ .team-panel { position: relative; background: linear-gradient(45deg, var(--main-dark), var(--main-light)); padding: 20px; width: 32%; min-width: 150px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: center; align-items: center; border-radius: 4px; border: 6px solid var(--border); font-size: 14px; min-height: 300px; } .team-panel img:not(.hero-slot-photo) { border-radius: 50%; width: 100px; height: 100px; margin-top: 10px; margin-bottom: 10px; box-shadow: 0 4px 14px rgba(0,0,0,0.45), 0 1px 4px rgba(0,0,0,0.3); } .team-panel select { margin-top: 10px; width: 100%; padding: 10px; font-size: 14px; text-transform: uppercase; margin-bottom: 10px; } #starContainerHome, #starContainerAway { margin-bottom: 10px; } #divisionTextHome, #divisionTextAway { margin-bottom: 5px; } /* ═══════════════════════════════════════════════════════════ TEAM SELECT DROPDOWN ═══════════════════════════════════════════════════════════ */ .team-select { background-color: var(--main-dark); border: none; border-radius: 2px; color: var(--text-colour); font-weight: bold; font-size: 18px; text-align: center; text-align-last: center; -webkit-text-align-last: center; overflow-y: auto; max-height: 100px; max-width: 100%; } .team-select:focus { border: none; } /* ═══════════════════════════════════════════════════════════ MATCH DETAILS — centre column ═══════════════════════════════════════════════════════════ */ .match-details { font-size: 12px; display: flex; flex-direction: column; align-items: stretch; gap: 20px; width: 220px; flex-shrink: 0; } .round-select { display: flex; align-items: center; justify-content: center; padding: 8px; font-weight: bold; margin: 0 auto; max-width: 260px; width: 100%; } .round-select select { padding: 10px; font-weight: bold; margin: 0; } .round-dropdown { background-color: var(--main-dark); color: var(--text-colour); border: none; border-radius: 2px; font-weight: bold; font-size: 14px; text-align: center; text-align-last: center; -webkit-text-align-last: center; text-transform: uppercase; width: 100%; } .match-details-stadium { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 0; padding: 0 10px; text-align: center; } .info-icon-box { width: 100%; height: 48px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.07); border: 2px solid var(--border); border-radius: 4px; } .info-icon-box img { width: 22px; height: 22px; } .info-icon-text { display: flex; flex-direction: column; gap: 2px; } #prizeMoney, #ifDraw, #ifDrawContainer { margin: 0; } /* ═══════════════════════════════════════════════════════════ CLASH ANIMATION (desktop only) ═══════════════════════════════════════════════════════════ */ @keyframes clash-home { 0% { transform: translateX(0) scale(1); } 80% { transform: translateX(calc(var(--clash-x) + 8px)) scale(1.04); } 100% { transform: translateX(var(--clash-x)) scale(1); } } @keyframes clash-away { 0% { transform: translateX(0) scale(1); } 80% { transform: translateX(calc(var(--clash-x) - 8px)) scale(1.04); } 100% { transform: translateX(var(--clash-x)) scale(1); } } .teams--clash .team-panel:first-child { animation: clash-home 0.75s ease-in forwards; z-index: 10; } .teams--clash .team-panel:last-child { animation: clash-away 0.75s ease-in forwards; z-index: 10; } .teams--clash .match-details { opacity: 0.15; transition: opacity 0.25s; } /* ═══════════════════════════════════════════════════════════ SIMULATE BUTTON ═══════════════════════════════════════════════════════════ */ .simulate-btn { background: var(--main-dark); color: var(--text-colour); padding: 15px 30px; font-size: 24px; font-weight: bold; border: none; border-radius: 2px; cursor: pointer; margin-top: 20px; } .simulate-btn:hover { background: var(--main-light); color: var(--text-colour); border: 3px solid var(--border); } /* ═══════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════ */ .banner { height: 50px; position: fixed; bottom: 0; left: 0; width: 100%; display: flex; align-items: center; justify-content: center; } .dhd-logo { height: 22px; opacity: 0.5; display: block; } .kofi-footer-link { margin-left: 12px; text-decoration: none; opacity: 0.6; transition: opacity 0.2s; } .kofi-footer-link:hover { opacity: 1; } /* ═══════════════════════════════════════════════════════════ TOOLTIP ═══════════════════════════════════════════════════════════ */ .tooltip { position: relative; display: inline-block; cursor: help; } .tooltip-text { visibility: hidden; opacity: 0; width: 220px; background-color: var(--text-colour); color: var(--main-light); text-align: left; padding: 8px; border-radius: 2px; font-size: 12px; line-height: 1.5; border: 1px solid var(--border); position: absolute; top: 100%; left: 0; margin-top: 0; z-index: 100; } .tooltip:hover .tooltip-text { visibility: visible; opacity: 1; } /* ═══════════════════════════════════════════════════════════ MODALS — SHARED ═══════════════════════════════════════════════════════════ */ #matchReportModal, #cupHeroesModal, #matchInfoModal, #cupHeroesInfoModal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(16px); } .modal-content { max-width: 90%; width: 800px; background: linear-gradient(45deg, var(--main-dark), var(--main-light)); padding: 30px; border-radius: 4px; color: var(--text-colour); box-sizing: border-box; border: 6px solid var(--border); } /* ═══════════════════════════════════════════════════════════ MATCH REPORT MODAL ═══════════════════════════════════════════════════════════ */ .content { display: flex; flex-direction: column; align-items: center; } #matchEarningsSection { text-align: center; } #totalHome p, #totalAway p { font-weight: bold; } /* Score row — grid so the score stays pinned to centre regardless of name length */ .match-result--score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; } .match-result--score .home-result { justify-self: end; } .match-result--score .away-result { justify-self: start; } .score-center { display: flex; flex-direction: column; align-items: center; gap: 2px; } .match-result { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 40px; } .home-result, .away-result { display: flex; flex-direction: column; align-items: center; justify-content: center; } #reportHomeBadge, #reportAwayBadge { filter: drop-shadow(0 4px 14px rgba(0,0,0,0.45)) drop-shadow(0 1px 4px rgba(0,0,0,0.3)); } .result p { font-weight: bold; margin-top: 30px; font-size: 18px; } #reportScore { font-size: 32px; font-weight: bold; } #reportRound { margin-top: 0; } .modal-buttons { display: flex; justify-content: center; gap: 12px; margin-top: 20px; flex-wrap: wrap; width: 100%; } .modal-buttons .report-button { min-width: 130px; } .report-button { background-color: var(--main-dark); color: var(--text-colour); border: 2px solid var(--border); padding: 10px 16px; border-radius: 2px; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0.5px; } .report-button:hover { background-color: var(--main-light); } .earnings-toggle-btn { display: none; /* mobile only — shown via media query */ background: transparent; color: var(--text-colour); border: 1px solid var(--border); border-radius: 2px; padding: 6px 16px; font-size: 12px; font-weight: bold; font-family: inherit; cursor: pointer; opacity: 0.7; margin: 8px auto 0; } .earnings-toggle-btn:hover { opacity: 1; } #startPenButton { display: block; margin: 12px auto 0; width: 100%; padding: 14px; font-size: 15px; } .hero-narrative { width: 100%; padding: 12px 0 10px; border-top: 1px solid rgba(255, 255, 255, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: none; } /* ═══════════════════════════════════════════════════════════ HERO REPORT — match report visual ═══════════════════════════════════════════════════════════ */ .hero-report-row { display: flex; align-items: center; justify-content: center; gap: 40px; /* mirrors .match-result gap so sides sit under the team columns */ } .hero-report-side { display: flex; gap: 6px; } .hero-report-divider { width: 2px; height: 52px; background: var(--border); border-radius: 1px; opacity: 0.5; } .hero-report-slot { position: relative; width: 44px; display: flex; flex-direction: column; align-items: center; gap: 3px; } /* Square icon — matches .hero-slot style from the team panel */ .hero-report-image { position: relative; width: 44px; height: 44px; border-radius: 3px; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: #fff; letter-spacing: 0.5px; overflow: hidden; transition: box-shadow 0.2s; } .hero-report-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* Empty placeholder — no hero selected */ .hero-report-slot--empty .hero-report-image { background: rgba(255,255,255,0.04) !important; border-color: var(--border); opacity: 0.35; } /* Selected, didn't fire */ .hero-report-slot--blank .hero-report-image { opacity: 0.22; filter: grayscale(60%); } /* Primary bonus fired */ .hero-report-slot--active .hero-report-image { opacity: 1; border-color: transparent; } /* Secondary / special bonus fired */ .hero-report-slot--bonus .hero-report-image { opacity: 1; border-color: transparent; box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.4); } .hero-report-pos { font-size: 9px; font-weight: 700; opacity: 0.4; letter-spacing: 0.5px; text-transform: uppercase; } .hero-report-slot--empty .hero-report-pos { display: none; } /* Tooltip — shown on hover */ .hero-report-tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); background: var(--main-dark); border: 1px solid var(--border); color: var(--text-colour); font-size: 11px; line-height: 1.4; padding: 5px 8px; border-radius: 4px; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.15s; z-index: 20; } .hero-report-slot:hover .hero-report-tooltip { opacity: 1; } .hero-report-slot--empty .hero-report-tooltip, .hero-report-slot--blank .hero-report-tooltip { display: none; } /* ═══════════════════════════════════════════════════════════ MATCH INFO MODAL (mobile only) ═══════════════════════════════════════════════════════════ */ .match-info-btn { display: none; } .match-info-modal-content { width: 320px; max-width: 90%; background: linear-gradient(45deg, var(--main-dark), var(--main-light)); padding: 24px; border-radius: 4px; color: var(--text-colour); box-sizing: border-box; border: 6px solid var(--border); text-align: left; } .match-info-modal-content h2 { margin: 0 0 16px; font-size: 18px; text-align: center; } .match-info-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); font-size: 14px; gap: 16px; } .match-info-row span:first-child { opacity: 0.65; white-space: nowrap; } .match-info-row span:last-child { font-weight: bold; text-align: right; } .match-info-close { display: block; width: 100%; margin-top: 16px; background: var(--main-dark); color: var(--text-colour); border: 2px solid var(--border); border-radius: 2px; padding: 10px; font-size: 14px; font-weight: bold; cursor: pointer; } .match-info-close:hover { background: var(--main-light); } /* ═══════════════════════════════════════════════════════════ CUP HEROES — TEAM PANEL ═══════════════════════════════════════════════════════════ */ .cup-heroes-trigger { width: 100%; text-align: center; margin-top: auto; padding: 12px 0 4px; } .cup-heroes-title { font-size: 11px; font-weight: bold; letter-spacing: 0.5px; text-transform: uppercase; opacity: 0.45; margin-bottom: 12px; } .hero-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 100%; margin-bottom: 8px; } .hero-slot { position: relative; aspect-ratio: 1; border-radius: 3px; border: none; background: rgba(0, 0, 0, 0.3); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; transition: background 0.2s, box-shadow 0.2s; } .hero-slot:hover { background: rgba(128, 128, 128, 0.3); } .hero-slot-label { font-size: 10px; font-weight: bold; opacity: 0.2; letter-spacing: 0.5px; } .hero-slot-initials { font-size: 13px; font-weight: bold; color: rgba(255, 255, 255, 0.85); } .hero-slot-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .cup-heroes-slots-toggle { display: none; } .cup-heroes-info-icon { display: inline-flex; background: transparent; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; width: 17px; height: 17px; font-size: 11px; font-style: italic; font-family: Georgia, serif; font-weight: bold; color: var(--text-colour); cursor: pointer; padding: 0; line-height: 1; align-items: center; justify-content: center; opacity: 0.65; vertical-align: middle; margin-left: 10px; } /* ═══════════════════════════════════════════════════════════ CUP HEROES — INFO MODAL ═══════════════════════════════════════════════════════════ */ .cup-heroes-info-modal-content { width: 480px; max-width: 90%; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: 28px; text-align: left; min-height: 420px; display: flex; flex-direction: column; justify-content: space-between; } .cup-heroes-info-modal-content h2 { margin: 0 0 4px; font-size: 20px; } .cup-heroes-info-subtitle { margin: 0 0 18px; font-size: 13px; opacity: 0.55; } .cup-heroes-info-body p { font-size: 14px; line-height: 1.6; margin: 0 0 12px; } .cup-heroes-info-body ul { margin: 0 0 16px; padding-left: 20px; } .cup-heroes-info-body li { font-size: 13px; line-height: 1.7; opacity: 0.9; } /* ═══════════════════════════════════════════════════════════ CUP HEROES — DEMO PANELS ═══════════════════════════════════════════════════════════ */ .demo-panel { display: none; flex: 1; } .demo-panel.active { display: block; } .demo-dots { display: flex; justify-content: center; gap: 8px; margin: 24px 0 16px; } .demo-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); transition: background 0.2s; } .demo-dot.active { background: var(--accent); } /* Panel 2 — hero slots */ .demo-hero-slots { display: flex; justify-content: center; gap: 12px; margin: 20px 0; } .demo-hero-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; } .demo-hero-image { width: 52px; height: 52px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 11px; color: #fff; letter-spacing: 0.5px; } .demo-slot-label { font-size: 10px; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.5px; } .demo-rules-list { margin: 0 0 8px; padding-left: 18px; } .demo-rules-list li { font-size: 13px; line-height: 1.7; opacity: 0.9; } /* Panels 3 & 4 — demo cards */ .demo-cards-row { display: flex; gap: 14px; justify-content: center; margin: 20px 0 16px; } .demo-card { background: rgba(255,255,255,0.05); border: 2px solid var(--border); border-radius: 4px; width: 180px; overflow: hidden; flex-shrink: 0; } .demo-card-image { width: 100%; height: 72px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 800; color: #fff; letter-spacing: 1px; } .demo-card-body { padding: 10px 10px 12px; } .demo-card-name { font-weight: 700; font-size: 13px; margin-bottom: 6px; } .demo-card-primary { font-size: 12px; line-height: 1.5; opacity: 0.85; margin-bottom: 6px; } .demo-card-secondary { font-size: 11px; line-height: 1.5; opacity: 0.6; } .demo-panel-note { font-size: 13px; line-height: 1.6; opacity: 0.7; margin: 0; font-style: italic; } .demo-panel-tip { margin-top: 16px; padding: 12px 14px; background: rgba(255, 255, 255, 0.08); border-left: 3px solid var(--accent); border-radius: 2px; font-size: 13px; line-height: 1.6; } /* Real hero card stack used in info modal panels 3 & 4 */ .demo-real-cards { display: flex; justify-content: center; align-items: flex-end; margin: 24px 0 20px; min-height: 190px; } .demo-real-card { width: 120px; flex-shrink: 0; pointer-events: none !important; cursor: default !important; transition: none !important; position: relative; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55); } .demo-real-card:first-child { transform: rotate(-6deg); transform-origin: bottom center; z-index: 1; margin-right: -32px; filter: brightness(0.88); } .demo-real-card:last-child { transform: rotate(5deg); transform-origin: bottom center; z-index: 2; } /* ═══════════════════════════════════════════════════════════ CUP HEROES — MODAL ═══════════════════════════════════════════════════════════ */ .cup-heroes-modal-content { max-width: 90%; width: 900px; max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; background: linear-gradient(45deg, var(--main-dark), var(--main-light)); padding: 0 30px 30px; border-radius: 4px; color: var(--text-colour); box-sizing: border-box; border: 6px solid var(--border); } .cup-heroes-sticky-header { position: sticky; top: 0; background: var(--main-dark); padding: 24px 0 14px; z-index: 10; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 16px; } .cup-heroes-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .cup-heroes-badge-img { width: 56px; height: 56px; border-radius: 50%; object-fit: contain; flex-shrink: 0; } .cup-heroes-banner-meta { flex: 1; min-width: 0; } .cup-heroes-banner-meta h2 { margin: 0 0 2px; font-size: 20px; } #cupHeroesCount { font-size: 14px; opacity: 0.8; } #cupHeroesCount.count-full { color: var(--accent-gold); opacity: 1; } #cupHeroesClose { background: var(--main-dark); color: var(--text-colour); border: 2px solid var(--border); border-radius: 2px; padding: 8px 16px; cursor: pointer; font-size: 14px; font-weight: bold; } #cupHeroesClose:hover { background: var(--main-light); } .cup-heroes-sticky-footer { display: none; } .cup-heroes-filter-bar { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; } .filter-btn { background: transparent; color: var(--text-colour); border: 1px solid var(--border); border-radius: 2px; padding: 6px 14px; cursor: pointer; font-size: 13px; font-family: inherit; } .filter-btn.active { background: var(--border); } .filter-btn:hover:not(.active) { background: rgba(255, 255, 255, 0.1); } .cup-heroes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .no-heroes { grid-column: 1 / -1; text-align: center; opacity: 0.6; } .hero-card { position: relative; cursor: pointer; display: flex; flex-direction: column; background: var(--main-dark); border: 10px solid var(--pos-color, var(--border)); border-radius: 0; transition: filter 0.15s, transform 0.1s; } .hero-card:hover:not(.hero-card--disabled):not(.hero-card--locked) { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.25)); transform: translateY(-2px); } .hero-card--selected { border: 10px solid var(--accent); filter: drop-shadow(0 0 18px var(--accent-glow)); } .hero-card--disabled { opacity: 0.4; pointer-events: none; } .hero-card--locked { opacity: 0.45; filter: grayscale(80%); cursor: pointer; } .hero-card-lock { position: absolute; top: 6px; right: 6px; width: 18px; height: 15px; background: rgba(255, 255, 255, 0.9); border-radius: 2px; } .hero-card-lock::before { content: ''; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 11px; height: 10px; border: 2.5px solid rgba(255, 255, 255, 0.9); border-bottom: none; border-radius: 6px 6px 0 0; } .hero-card-lock::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -40%); width: 4px; height: 5px; background: rgba(0, 0, 0, 0.35); border-radius: 1px; } /* Photo area */ .hero-card-image { position: relative; width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .hero-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-card-initials { font-size: 1.8rem; font-weight: bold; color: rgba(255, 255, 255, 0.75); display: none; } .hero-card-check { position: absolute; top: 6px; right: 6px; background: var(--accent); color: white; border-radius: 2px; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: bold; z-index: 2; box-shadow: 0 0 10px 3px var(--accent-glow); } /* Name banner */ .hero-card-name { background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 12px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; text-align: center; padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, 0.08); } /* Position + price row */ .hero-card-meta { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; background: rgba(0, 0, 0, 0.3); border-top: 1px solid rgba(255, 255, 255, 0.06); } .hero-card-meta-pos { font-size: 10px; font-weight: 800; letter-spacing: 0.5px; background: rgba(255, 255, 255, 0.15); padding: 2px 6px; border-radius: 2px; } .hero-card-meta-price { font-size: 11px; font-weight: 700; color: var(--accent-gold); } /* Bonus description bars */ .hero-card-bonus { font-size: 10px; line-height: 1.4; padding: 5px 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.04); } /* ═══════════════════════════════════════════════════════════ PENALTY SHOOTOUT ═══════════════════════════════════════════════════════════ */ #penaltyScoreDisplay { font-size: 16px; font-weight: 700; opacity: 0.7; margin: 0; text-align: center; } .penalty-circles-section { display: flex; flex-direction: row; justify-content: center; gap: 80px; margin: 20px 0; } .pen-column { display: flex; flex-direction: column; gap: 10px; } #penColHome { align-items: flex-end; } #penColAway { align-items: flex-start; } .pen-row { display: flex; flex-direction: row; align-items: center; gap: 8px; } .pen-label { font-size: 13px; font-weight: 400; width: 50px; opacity: 0; transition: opacity 0.35s ease; } .pen-row--home .pen-label { text-align: right; } .pen-row--away .pen-label { text-align: left; } .pen-label--scored { color: #ffffff; opacity: 1; } .pen-label--missed { color: #cc2200; opacity: 1; } .pen-circle { width: 32px; height: 32px; border-radius: 50%; background-color: #444; border: 2px solid #666; transition: background-color 0.3s ease, border-color 0.3s ease; } .pen-circle--active { border-color: #fff; animation: pen-pulse 0.6s ease-in-out infinite; } @keyframes pen-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.7; } } .pen-circle--scored { background-color: #ffffff; border-color: #ffffff; } .pen-circle--missed { background-color: #cc2200; border-color: #cc2200; } /* ═══════════════════════════════════════════════════════════ CLASSIC SKIN Activated by: data-theme="classic" on ── Palette ────────────────────────────────────────────── Background #1A6437 page / stage colour Card #0D9D54 panel & modal base (gradient dark end) Soft #3A6B4C gradient light end · borders · hovers Strong #e8c84a accent · selection · gold White #ffffff text ═══════════════════════════════════════════════════════════ */ [data-theme="classic"] { --main-dark: #0D9D54; /* Card */ --main-light: #3A6B4C; /* Soft — darkened for white text contrast */ --text-colour: white; --border: #1A6437; /* Background — dark outlines on Card panels */ --accent: #e8c84a; /* Strong — warm gold */ --accent-subtle: rgba(232, 200, 74, 0.2); --accent-glow: rgba(232, 200, 74, 0.65); --accent-gold: #e8c84a; /* Strong — warm gold */ --overlay-bg: rgba(8, 90, 45, 0.6); } body[data-theme="classic"] { background-image: repeating-linear-gradient( -50deg, #1a6437 0px, #1a6437 135px, #1c6b3b 135px, #1c6b3b 270px ); background-color: #1a6437; } /* Team dropdowns recede into the page background */ [data-theme="classic"] .team-select { background-color: #1A6437; } /* Round selector matches Play Match button */ [data-theme="classic"] .round-dropdown { background-color: var(--main-dark); } [data-theme="classic"] .report-button:hover, [data-theme="classic"] .simulate-btn:hover { background: #1A6437; color: var(--text-colour); border-color: #1A6437; } /* ═══════════════════════════════════════════════════════════ SKY SKIN Activated by: data-theme="sky" on ── Palette ────────────────────────────────────────────── Background #000322 deep navy stage Mid #193686 royal blue — card gradient light end Contrast #BF0807 red — borders, simulate button, accents White #ffffff text ═══════════════════════════════════════════════════════════ */ [data-theme="sky"] { --main-dark: #000322; --main-light: #193686; --text-colour: #ffffff; --border: #bf0807; --accent: #bf0807; --accent-subtle: rgba(191, 8, 7, 0.15); --accent-glow: rgba(191, 8, 7, 0.45); --accent-gold: #ffffff; --overlay-bg: rgba(0, 3, 34, 0.78); } body[data-theme="sky"] { background-image: radial-gradient(ellipse 140% 45% at 50% 0%, rgba(25, 54, 134, 0.28) 0%, transparent 65%), repeating-linear-gradient( -50deg, #000322 0px, #000322 135px, #000928 135px, #000928 270px ); background-color: #000322; } [data-theme="sky"] header { background: linear-gradient(180deg, #1e4aaa 0%, #193686 55%, #0e245c 100%); box-shadow: 0 3px 0 #bf0807, 0 5px 16px rgba(0, 3, 34, 0.7); } [data-theme="sky"] .team-panel { background: linear-gradient(180deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0) 45%), linear-gradient(155deg, #1e3d99 0%, #040e40 70%); box-shadow: 0 4px 24px rgba(0, 3, 34, 0.7), inset 0 1px 0 rgba(255,255,255,0.12); } [data-theme="sky"] .modal-content { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%), linear-gradient(155deg, #1e3d99 0%, #040e40 70%); box-shadow: 0 8px 48px rgba(0, 3, 34, 0.9); } [data-theme="sky"] .match-info-modal-content { background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 35%), linear-gradient(155deg, #1e3d99 0%, #040e40 70%); box-shadow: 0 8px 48px rgba(0, 3, 34, 0.9); } [data-theme="sky"] .simulate-btn { background: linear-gradient(180deg, #e8201f 0%, #bf0807 55%, #880000 100%); border: none; box-shadow: 0 3px 16px rgba(191, 8, 7, 0.55), inset 0 1px 0 rgba(255,255,255,0.2); } [data-theme="sky"] .simulate-btn:hover { background: linear-gradient(180deg, #ff3332 0%, #d40a09 55%, #9e0000 100%); color: #ffffff; border: none; box-shadow: 0 5px 20px rgba(191, 8, 7, 0.75), inset 0 1px 0 rgba(255,255,255,0.25); } [data-theme="sky"] .report-button { background: linear-gradient(180deg, #1a3d9e 0%, #0d2060 100%); border-color: #bf0807; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } [data-theme="sky"] .report-button:hover { background: linear-gradient(180deg, #2450b8 0%, #193686 100%); color: #ffffff; } [data-theme="sky"] .team-select { background-color: #000322; } /* Round selector matches Play Match button */ [data-theme="sky"] .round-dropdown { background-color: var(--accent); } [data-theme="sky"] .info-icon-box { border: none; } /* ═══════════════════════════════════════════════════════════ RETRO SKIN — Supporter exclusive Activated by: data-theme="retro" on ── Concept: Ceefax / BBC Teletext football results ─────── ── Palette ────────────────────────────────────────────── Stage #000000 pure black Panel #000080 classic teletext navy Panel hi #0000CC lighter navy gradient top Cyan #00FFFF chrome · borders · page headers Yellow #FFFF00 selection · accent · score Red #CC0000 simulate CTA Orange #FF8800 prices / gold White #FFFFFF body text Magenta #FF00FF secondary highlight ═══════════════════════════════════════════════════════════ */ [data-theme="retro"] { --main-dark: #000080; --main-light: #0000AA; --text-colour: #ffffff; --border: #00ffff; --accent: #ffff00; --accent-subtle: rgba(255, 255, 0, 0.12); --accent-glow: rgba(255, 255, 0, 0.45); --accent-gold: #ff8800; --overlay-bg: rgba(0, 0, 64, 0.92); } body[data-theme="retro"] { background-color: #000000; background-image: none; font-family: 'VT323', 'Courier New', monospace; } /* Scanline overlay */ body[data-theme="retro"]::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.12) 0px, rgba(0, 0, 0, 0.12) 1px, transparent 1px, transparent 4px ); pointer-events: none; z-index: 9000; } /* Font + sharp corners universally */ [data-theme="retro"], [data-theme="retro"] * { font-family: 'VT323', 'Courier New', monospace !important; border-radius: 0 !important; letter-spacing: 0.5px; } /* ── Header ─────────────────────────────────────────────── */ [data-theme="retro"] header { background: #000000; border-bottom: 3px solid #00ffff; box-shadow: 0 3px 0 rgba(0, 255, 255, 0.2); } /* Page-number bar above logo — Ceefax style */ [data-theme="retro"] header::before { content: 'BBC CEEFAX 302 FA CUP RESULTS'; position: absolute; top: 0; left: 0; right: 0; height: 20px; background: #000080; color: #ffffff; font-family: 'VT323', 'Courier New', monospace !important; font-size: 13px; letter-spacing: 1px; line-height: 20px; padding: 0 12px; text-transform: uppercase; pointer-events: none; } [data-theme="retro"] .skin-toggle { border: 1px solid #00ffff; color: #00ffff; } [data-theme="retro"] .skin-dropdown { background: #000080; border: 2px solid #00ffff; box-shadow: 4px 4px 0 #00ffff; } /* ── Match area ─────────────────────────────────────────── */ [data-theme="retro"] .match-area { background: transparent; } /* ── Team panels ────────────────────────────────────────── */ [data-theme="retro"] .team-panel { background: #000080; border: 4px solid #00ffff; box-shadow: 5px 5px 0 #006666; } [data-theme="retro"] .team-panel img:not(.hero-slot-photo) { box-shadow: 3px 3px 0 #00ffff; } /* ── Dropdowns ──────────────────────────────────────────── */ [data-theme="retro"] .team-select, [data-theme="retro"] .round-dropdown { background-color: #000000; color: #00ffff; font-size: 16px; } [data-theme="retro"] .info-icon-box { background: rgba(0, 255, 255, 0.08); border: 2px solid #00ffff; box-shadow: 3px 3px 0 #006666; } /* ── Simulate button ────────────────────────────────────── */ [data-theme="retro"] .simulate-btn { background: #cc0000; color: #ffffff; border: none; font-size: 28px; letter-spacing: 4px; text-transform: uppercase; box-shadow: 5px 5px 0 #660000; transition: box-shadow 0.1s, transform 0.1s; } [data-theme="retro"] .simulate-btn:hover { background: #ff0000; color: #ffff00; border: none; box-shadow: 3px 3px 0 #880000; transform: translate(2px, 2px); } /* ── Modals ─────────────────────────────────────────────── */ [data-theme="retro"] .modal-content { background: #000080; border: 4px solid #00ffff; box-shadow: 8px 8px 0 #006666; } [data-theme="retro"] .match-info-modal-content { background: #000080; border: 4px solid #00ffff; box-shadow: 8px 8px 0 #006666; } [data-theme="retro"] .cup-heroes-modal-content { background: #000080; border: 4px solid #00ffff; box-shadow: 8px 8px 0 #006666; } [data-theme="retro"] .cup-heroes-info-modal-content { background: #000080; border: 4px solid #00ffff; box-shadow: 8px 8px 0 #006666; } [data-theme="retro"] .cup-heroes-sticky-header { background: #000080; border-bottom: 2px solid #00ffff; } /* ── Match report score ─────────────────────────────────── */ [data-theme="retro"] #reportScore { color: #ffff00; font-size: 52px; letter-spacing: 8px; text-shadow: 3px 3px 0 #888800; } [data-theme="retro"] #reportRound { color: #00ffff; letter-spacing: 2px; text-transform: uppercase; } /* ── Buttons ────────────────────────────────────────────── */ [data-theme="retro"] .report-button { background: #000080; border: 2px solid #00ffff; letter-spacing: 1px; box-shadow: 3px 3px 0 #006666; transition: box-shadow 0.1s, transform 0.1s; } [data-theme="retro"] .report-button:hover { background: #00ffff; color: #000080; box-shadow: 1px 1px 0 #006666; transform: translate(2px, 2px); } [data-theme="retro"] #cupHeroesClose { background: #000080; border: 2px solid #00ffff; box-shadow: 3px 3px 0 #006666; } [data-theme="retro"] #cupHeroesClose:hover { background: #00ffff; color: #000080; } [data-theme="retro"] .match-info-close { background: #000080; border: 2px solid #00ffff; box-shadow: 3px 3px 0 #006666; } [data-theme="retro"] .match-info-close:hover { background: #00ffff; color: #000080; } /* ── Hero cards ─────────────────────────────────────────── */ [data-theme="retro"] .hero-card { border: 4px solid var(--pos-color, #00ffff); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6); } [data-theme="retro"] .hero-card:hover:not(.hero-card--disabled):not(.hero-card--locked) { filter: none; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6); transform: translate(2px, 2px); } [data-theme="retro"] .hero-card--selected { border: 4px solid #ffff00; filter: none; box-shadow: 4px 4px 0 #888800; } [data-theme="retro"] .hero-card-name { background: #000000; letter-spacing: 2px; font-size: 13px; } [data-theme="retro"] .hero-card-meta { background: rgba(0, 0, 0, 0.5); } [data-theme="retro"] .hero-card-check { background: #ffff00; color: #000000; box-shadow: none; } /* ── Filter bar ─────────────────────────────────────────── */ [data-theme="retro"] .filter-btn { border: 1px solid #00ffff; color: #00ffff; letter-spacing: 1px; box-shadow: 2px 2px 0 #006666; } [data-theme="retro"] .filter-btn.active { background: #00ffff; color: #000080; box-shadow: none; transform: translate(2px, 2px); } [data-theme="retro"] .filter-btn:hover:not(.active) { background: rgba(0, 255, 255, 0.15); } /* ── Penalty circles ────────────────────────────────────── */ [data-theme="retro"] .pen-circle { background: #000080; border: 2px solid #00ffff; box-shadow: 2px 2px 0 #006666; } [data-theme="retro"] .pen-circle--scored { background: #ffff00; border-color: #ffff00; box-shadow: 2px 2px 0 #888800; } [data-theme="retro"] .pen-circle--missed { background: #cc0000; border-color: #cc0000; box-shadow: 2px 2px 0 #660000; } [data-theme="retro"] .pen-label--scored { color: #ffff00; } [data-theme="retro"] .pen-label--missed { color: #cc0000; } /* ── Hero report slots ──────────────────────────────────── */ [data-theme="retro"] .hero-report-image { border: 2px solid #00ffff; box-shadow: 2px 2px 0 #006666; } [data-theme="retro"] .hero-report-slot--active .hero-report-image { border-color: #ffff00; box-shadow: 2px 2px 0 #888800; } [data-theme="retro"] .hero-report-slot--bonus .hero-report-image { border-color: #ff00ff; box-shadow: 0 0 0 2px #ff00ff, 2px 2px 0 #880088; } [data-theme="retro"] .hero-report-tooltip { background: #000080; border: 1px solid #00ffff; box-shadow: 2px 2px 0 #006666; } /* ── Match info rows ────────────────────────────────────── */ [data-theme="retro"] .match-info-row { border-bottom: 1px solid #00ffff; } /* ── Cup Heroes count ───────────────────────────────────── */ [data-theme="retro"] #cupHeroesCount.count-full { color: #ffff00; } /* ── Demo dots ──────────────────────────────────────────── */ [data-theme="retro"] .demo-dot { background: #000080; border: 1px solid #00ffff; border-radius: 0 !important; width: 10px; height: 10px; } [data-theme="retro"] .demo-dot.active { background: #00ffff; } /* ── Welcome / Supporter modals ─────────────────────────── */ [data-theme="retro"] .welcome-features li { background: rgba(0, 255, 255, 0.07); border: 1px solid rgba(0, 255, 255, 0.2); } [data-theme="retro"] .simulate-btn { letter-spacing: 4px; } /* ── Banner / footer ────────────────────────────────────── */ [data-theme="retro"] .banner { border-top: 2px solid #00ffff; background: #000000; } /* ═══════════════════════════════════════════════════════════ WELCOME MODAL ═══════════════════════════════════════════════════════════ */ #welcomeModal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 3000; backdrop-filter: blur(16px); } #welcomeModal.hidden { display: none !important; } .welcome-modal-content { width: 400px; max-width: 90%; text-align: center; padding: 40px 36px 36px; } .welcome-logo { height: 56px; margin-bottom: 20px; display: block; margin-left: auto; margin-right: auto; } .welcome-tagline { font-size: 13px; opacity: 0.7; margin: 0 0 24px; letter-spacing: 0.3px; line-height: 1.6; } .welcome-features { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 10px; } .welcome-features li { font-size: 13px; opacity: 0.85; padding: 10px 16px; background: rgba(255,255,255,0.06); border-radius: 4px; border: 1px solid rgba(255,255,255,0.08); } .welcome-cta { width: 100%; margin-top: 0; font-size: 16px; letter-spacing: 1px; } /* ═══════════════════════════════════════════════════════════ SUPPORTER MODAL ═══════════════════════════════════════════════════════════ */ #supporterModal, #heroUnlockModal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 3000; backdrop-filter: blur(16px); } .supporter-modal-icon { font-size: 36px; margin-bottom: 36px; } .kofi-modal-icon { height: 40px; width: auto; display: block; margin: 0 auto; } .kofi-inline-logo { height: 14px; width: auto; vertical-align: middle; position: relative; top: -1px; } .kofi-badge-link { display: block; margin-bottom: 24px; } .kofi-badge { width: 100%; max-width: 220px; height: auto; display: block; margin: 0 auto; } .supporter-kofi-btn { display: block; width: 100%; background: #ff5e5b; color: #fff; border: none; border-radius: 4px; padding: 13px; font-size: 14px; font-weight: bold; font-family: inherit; letter-spacing: 0.5px; cursor: pointer; margin-bottom: 10px; } .supporter-kofi-btn:hover { background: #e04e4b; } .skin-option--supporter { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2px; padding-top: 10px; } .supporter-password-row { display: flex; gap: 8px; margin-bottom: 8px; } .supporter-password-input { flex: 1; background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.25); border-radius: 4px; padding: 10px 12px; font-size: 14px; font-family: inherit; color: #fff; } .supporter-password-input::placeholder { color: rgba(255,255,255,0.4); } .supporter-password-input:focus { outline: none; border-color: rgba(255,255,255,0.6); } .supporter-unlock-btn { background: var(--accent, #AAA54A); color: #fff; border: none; border-radius: 4px; padding: 10px 16px; font-size: 14px; font-weight: bold; font-family: inherit; cursor: pointer; white-space: nowrap; } .supporter-unlock-btn:hover { opacity: 0.85; } .supporter-password-error { font-size: 12px; color: #ff8080; margin: 0 0 8px; opacity: 1; } .supporter-dismiss { display: block; margin-top: 16px; font-size: 13px; opacity: 0.5; cursor: pointer; transition: opacity 0.2s; } .supporter-dismiss:hover { opacity: 0.8; } /* ═══════════════════════════════════════════════════════════ SUPPORTER SKIN — Night ★ (Ko-fi exclusive) Activated by: data-theme="supporter" on ── Concept: Champions League · Wembley under floodlights ─ ── Palette ────────────────────────────────────────────── Stage deep #020918 near-black navy — the night sky Panel base #020d2e darkest panel surface Panel mid #0d2158 gradient light end Gold #c9a227 UCL trophy gold — accent · borders Gold hi #e8c84a hover / glow highlights Border quiet #1a3060 subtle internal dividers White #ffffff body text Overlay rgba(2,9,24,0.94) ═══════════════════════════════════════════════════════════ */ [data-theme="supporter"] { --main-dark: #020d2e; --main-light: #0d2158; --text-colour: #ffffff; --border: #1a3060; --accent: #c9a227; --accent-subtle: rgba(201, 162, 39, 0.12); --accent-glow: rgba(201, 162, 39, 0.4); --accent-gold: #c9a227; --overlay-bg: rgba(2, 9, 24, 0.94); } /* ── Background: night sky + stadium atmosphere ─────────── */ body[data-theme="supporter"] { background-color: #020918; background-image: /* Blue atmosphere — floodlight haze above the pitch */ radial-gradient(ellipse 130% 55% at 50% -5%, rgba(14, 46, 130, 0.6) 0%, transparent 62%), /* Green pitch glow bleeding up from below */ radial-gradient(ellipse 80% 28% at 50% 104%, rgba(4, 28, 10, 0.8) 0%, transparent 55%), /* Star field — scattered white points */ radial-gradient(circle at 8% 11%, rgba(255,255,255,0.80) 0.5px, transparent 1.5px), radial-gradient(circle at 19% 5%, rgba(255,255,255,0.55) 0.5px, transparent 1.5px), radial-gradient(circle at 31% 17%, rgba(255,255,255,0.45) 0.5px, transparent 1.5px), radial-gradient(circle at 44% 8%, rgba(255,255,255,0.70) 0.5px, transparent 1.5px), radial-gradient(circle at 56% 14%, rgba(255,255,255,0.50) 0.5px, transparent 1.5px), radial-gradient(circle at 67% 4%, rgba(255,255,255,0.65) 0.5px, transparent 1.5px), radial-gradient(circle at 79% 19%, rgba(255,255,255,0.45) 0.5px, transparent 1.5px), radial-gradient(circle at 91% 9%, rgba(255,255,255,0.60) 0.5px, transparent 1.5px), radial-gradient(circle at 13% 31%, rgba(255,255,255,0.35) 0.5px, transparent 1.5px), radial-gradient(circle at 38% 26%, rgba(255,255,255,0.40) 0.5px, transparent 1.5px), radial-gradient(circle at 62% 33%, rgba(255,255,255,0.30) 0.5px, transparent 1.5px), radial-gradient(circle at 84% 28%, rgba(255,255,255,0.38) 0.5px, transparent 1.5px), radial-gradient(circle at 3% 48%, rgba(255,255,255,0.28) 0.5px, transparent 1.5px), radial-gradient(circle at 97% 42%, rgba(255,255,255,0.32) 0.5px, transparent 1.5px), radial-gradient(circle at 25% 52%, rgba(255,255,255,0.22) 0.5px, transparent 1.5px), radial-gradient(circle at 73% 57%, rgba(255,255,255,0.25) 0.5px, transparent 1.5px); background-attachment: fixed; } /* ── Header ─────────────────────────────────────────────── */ [data-theme="supporter"] header { background: linear-gradient(180deg, #0c1e4a 0%, #020918 100%); border-bottom: 2px solid #c9a227; box-shadow: 0 2px 24px rgba(201, 162, 39, 0.12), 0 4px 40px rgba(2, 9, 24, 0.9); } [data-theme="supporter"] .wembley-logo { filter: drop-shadow(0 0 10px rgba(201, 162, 39, 0.25)); } [data-theme="supporter"] .skin-toggle { border-color: rgba(201, 162, 39, 0.45); color: #c9a227; font-family: 'Cormorant Garant', Georgia, serif; font-size: 13px; font-weight: 600; letter-spacing: 1px; opacity: 1; } [data-theme="supporter"] .skin-toggle:hover { border-color: #c9a227; color: #e8c84a; } [data-theme="supporter"] .skin-dropdown { background: #020918; border: 1px solid rgba(201, 162, 39, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(201, 162, 39, 0.08); } /* ── Team panels ────────────────────────────────────────── */ [data-theme="supporter"] .team-panel { background: linear-gradient(160deg, #0d2158 0%, #020d2e 55%, #020918 100%); border: 2px solid #c9a227; box-shadow: 0 8px 40px rgba(2, 9, 24, 0.8), inset 0 1px 0 rgba(201, 162, 39, 0.18), inset 0 0 60px rgba(201, 162, 39, 0.025); } [data-theme="supporter"] .team-panel img:not(.hero-slot-photo) { box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.35), 0 4px 20px rgba(0, 0, 0, 0.7); } /* ── Dropdowns ──────────────────────────────────────────── */ [data-theme="supporter"] .team-select, [data-theme="supporter"] .round-dropdown { background-color: #020918; color: #ffffff; } [data-theme="supporter"] .info-icon-box { background: rgba(201, 162, 39, 0.05); border: 1px solid rgba(201, 162, 39, 0.22); } /* ── Simulate button — the crown jewel ─────────────────── */ [data-theme="supporter"] .simulate-btn { background: linear-gradient(180deg, #e8c84a 0%, #c9a227 48%, #9a7510 100%); color: #020918; border: none; font-size: 22px; font-weight: 900; letter-spacing: 3px; box-shadow: 0 4px 28px rgba(201, 162, 39, 0.55), 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.35); } [data-theme="supporter"] .simulate-btn:hover { background: linear-gradient(180deg, #f0d460 0%, #d4aa30 48%, #a88018 100%); color: #020918; border: none; box-shadow: 0 6px 36px rgba(201, 162, 39, 0.75), 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.4); } [data-theme="supporter"] .simulate-btn:disabled { background: rgba(201, 162, 39, 0.15); color: rgba(255, 255, 255, 0.25); box-shadow: none; } /* ── Modals ─────────────────────────────────────────────── */ [data-theme="supporter"] .modal-content { background: linear-gradient(160deg, #0d2158 0%, #020d2e 55%, #020918 100%); border: 2px solid #c9a227; box-shadow: 0 20px 80px rgba(2, 9, 24, 0.97), 0 0 0 1px rgba(201, 162, 39, 0.08); } [data-theme="supporter"] .match-info-modal-content { background: linear-gradient(160deg, #0d2158 0%, #020d2e 55%, #020918 100%); border: 2px solid #c9a227; box-shadow: 0 20px 80px rgba(2, 9, 24, 0.97); } [data-theme="supporter"] .cup-heroes-modal-content { background: linear-gradient(160deg, #0d2158 0%, #020918 100%); border: 2px solid #c9a227; box-shadow: 0 20px 80px rgba(2, 9, 24, 0.97); } [data-theme="supporter"] .cup-heroes-info-modal-content { background: linear-gradient(160deg, #0d2158 0%, #020918 100%); border: 2px solid #c9a227; box-shadow: 0 20px 80px rgba(2, 9, 24, 0.97); } [data-theme="supporter"] .cup-heroes-sticky-header { background: #0d2158; border-bottom: 1px solid rgba(201, 162, 39, 0.25); } /* ── Match report ────────────────────────────────────────── */ [data-theme="supporter"] #reportScore { color: #c9a227; font-size: 44px; text-shadow: 0 0 24px rgba(201, 162, 39, 0.35), 0 2px 4px rgba(0, 0, 0, 0.8); } [data-theme="supporter"] #reportRound { color: rgba(201, 162, 39, 0.65); letter-spacing: 2.5px; text-transform: uppercase; font-size: 11px; font-family: 'Cormorant Garant', Georgia, serif; } /* ── Buttons ────────────────────────────────────────────── */ [data-theme="supporter"] .report-button { background: rgba(201, 162, 39, 0.07); border: 1px solid rgba(201, 162, 39, 0.38); color: #c9a227; } [data-theme="supporter"] .report-button:hover { background: rgba(201, 162, 39, 0.14); color: #e8c84a; box-shadow: 0 0 12px rgba(201, 162, 39, 0.18); } [data-theme="supporter"] #cupHeroesClose, [data-theme="supporter"] .match-info-close { background: rgba(201, 162, 39, 0.07); border: 1px solid rgba(201, 162, 39, 0.38); color: #c9a227; } [data-theme="supporter"] #cupHeroesClose:hover, [data-theme="supporter"] .match-info-close:hover { background: rgba(201, 162, 39, 0.14); color: #e8c84a; } /* ── Hero cards ─────────────────────────────────────────── */ [data-theme="supporter"] .hero-card { background: #020d2e; border: 2px solid rgba(201, 162, 39, 0.18); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6); } [data-theme="supporter"] .hero-card:hover:not(.hero-card--disabled):not(.hero-card--locked) { border-color: rgba(201, 162, 39, 0.55); box-shadow: 0 0 18px rgba(201, 162, 39, 0.18), 0 4px 20px rgba(0, 0, 0, 0.6); transform: translateY(-2px); filter: none; } [data-theme="supporter"] .hero-card--selected { border: 2px solid #c9a227; filter: none; box-shadow: 0 0 22px rgba(201, 162, 39, 0.38), 0 4px 20px rgba(0, 0, 0, 0.6); } [data-theme="supporter"] .hero-card-check { background: #c9a227; color: #020918; box-shadow: 0 0 10px rgba(201, 162, 39, 0.5); } [data-theme="supporter"] .hero-card-name { background: rgba(0, 0, 0, 0.65); letter-spacing: 1px; } [data-theme="supporter"] .hero-card-meta { background: rgba(0, 0, 0, 0.45); } /* ── Filter bar ─────────────────────────────────────────── */ [data-theme="supporter"] .filter-btn { border: 1px solid rgba(201, 162, 39, 0.28); color: rgba(201, 162, 39, 0.65); } [data-theme="supporter"] .filter-btn.active { background: rgba(201, 162, 39, 0.14); border-color: #c9a227; color: #c9a227; } [data-theme="supporter"] .filter-btn:hover:not(.active) { background: rgba(201, 162, 39, 0.07); color: rgba(201, 162, 39, 0.85); } /* ── Hero report slots ──────────────────────────────────── */ [data-theme="supporter"] .hero-report-image { border: 2px solid rgba(201, 162, 39, 0.2); } [data-theme="supporter"] .hero-report-slot--active .hero-report-image { border-color: #c9a227; box-shadow: 0 0 10px rgba(201, 162, 39, 0.3); } [data-theme="supporter"] .hero-report-slot--bonus .hero-report-image { border-color: #e8c84a; box-shadow: 0 0 16px rgba(201, 162, 39, 0.55); } [data-theme="supporter"] .hero-report-tooltip { background: #020d2e; border: 1px solid rgba(201, 162, 39, 0.3); } /* ── Penalty shootout ───────────────────────────────────── */ [data-theme="supporter"] .pen-circle { background: #020d2e; border: 2px solid rgba(201, 162, 39, 0.28); } [data-theme="supporter"] .pen-circle--scored { background: #c9a227; border-color: #c9a227; box-shadow: 0 0 10px rgba(201, 162, 39, 0.45); } [data-theme="supporter"] .pen-circle--missed { background: #8b1a1a; border-color: #8b1a1a; } [data-theme="supporter"] .pen-label--scored { color: #c9a227; } [data-theme="supporter"] .pen-label--missed { color: #8b1a1a; } /* ── Hero slots (team panel) ────────────────────────────── */ [data-theme="supporter"] .hero-slot { background: rgba(201, 162, 39, 0.05); border: 1px solid rgba(201, 162, 39, 0.18); } [data-theme="supporter"] .hero-slot:hover { background: rgba(201, 162, 39, 0.1); } /* ── Demo dots ──────────────────────────────────────────── */ [data-theme="supporter"] .demo-dot { background: rgba(201, 162, 39, 0.18); } [data-theme="supporter"] .demo-dot.active { background: #c9a227; } /* ── Match info rows ────────────────────────────────────── */ [data-theme="supporter"] .match-info-row { border-bottom: 1px solid rgba(201, 162, 39, 0.1); } /* ── Cup Heroes count ───────────────────────────────────── */ [data-theme="supporter"] #cupHeroesCount.count-full { color: #c9a227; } /* ── Welcome features ───────────────────────────────────── */ [data-theme="supporter"] .welcome-features li { background: rgba(201, 162, 39, 0.06); border: 1px solid rgba(201, 162, 39, 0.14); } /* ── Footer ─────────────────────────────────────────────── */ [data-theme="supporter"] .banner { background: rgba(2, 9, 24, 0.96); border-top: 1px solid rgba(201, 162, 39, 0.2); } /* ═══════════════════════════════════════════════════════════ IN-PRODUCTION SKIN MODAL ═══════════════════════════════════════════════════════════ */ #skinProductionModal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: var(--overlay-bg); display: flex; align-items: center; justify-content: center; z-index: 2000; backdrop-filter: blur(16px); } .skin-production-modal-content { width: 340px; max-width: 90%; text-align: center; padding: 36px 32px 28px; } .skin-production-modal-content h2 { margin: 0 0 12px; font-size: 20px; } .skin-production-modal-content p { margin: 0 0 24px; font-size: 14px; line-height: 1.7; opacity: 0.75; } /* ═══════════════════════════════════════════════════════════ MOBILE OVERRIDES ═══════════════════════════════════════════════════════════ */ @media (max-width: 767px) { /* ── Header ─────────────────────────────────────── */ header { height: 56px; padding: 0 16px; display: flex; align-items: center; justify-content: center; } .wembley-logo { display: block; height: 50px; max-height: 50px; } /* ── Main layout ─────────────────────────────────── */ .container { padding: 16px; min-width: unset; margin: 24px auto; } .match-area { flex-direction: column; padding: 20px; gap: 16px; } .teams { flex-direction: column; gap: 16px; } .team-panel { width: 100%; min-width: unset; min-height: unset; } .team-panel img { width: 70px; height: 70px; } /* ── Match details — hidden on mobile, shown via modal ── */ .match-details { display: none !important; } /* ── Simulate row ────────────────────────────────── */ .simulate-btn { width: 100%; font-size: 18px; } .match-info-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin: 0; background: transparent; color: var(--text-colour); border: 1px solid var(--border); border-radius: 5px; padding: 10px 8px; font-size: 13px; font-family: inherit; font-weight: bold; cursor: pointer; opacity: 0.75; letter-spacing: 0.3px; } .match-info-icons { display: flex; align-items: center; gap: 4px; opacity: 0.85; } /* ── Match Info modal — centred, auto height ─────── */ .modal-content { width: 100%; height: 100%; border-radius: 0; } .match-info-modal-content { width: auto; min-width: 280px; max-width: 88vw; height: auto; border-radius: 4px; } /* ── Match Report modal — compact, fits screen ───── */ #matchReportModal .modal-content { height: auto; max-height: 96vh; overflow-y: auto; padding: 20px; } #reportHomeBadge, #reportAwayBadge { width: 60px !important; height: 60px !important; } .result p { font-size: 14px; margin-top: 10px; } #reportScore { font-size: 26px; } .hero-narrative { padding: 8px 0; } /* Earnings hidden by default, shown via toggle */ #matchEarningsSection { display: none; } .earnings-toggle-btn { display: block; } .match-result { gap: 16px; } /* ── Penalty ─────────────────────────────────────── */ .penalty-circles-section { gap: 40px; } /* ── Cup Heroes modal ────────────────────────────── */ .cup-heroes-modal-content { width: 100%; max-height: 100vh; border-radius: 0; } .cup-heroes-badge-img { width: 44px; height: 44px; } .cup-heroes-grid { grid-template-columns: repeat(2, 1fr); padding-bottom: 16px; } /* Save & Close moves to sticky footer */ #cupHeroesClose { display: none; } .cup-heroes-sticky-footer { display: block; position: sticky; bottom: 0; padding: 12px 0 20px; background: linear-gradient(0deg, var(--main-dark) 65%, transparent 100%); } #cupHeroesConfirm { width: 100%; background: var(--main-dark); color: var(--text-colour); border: 2px solid var(--border); border-radius: 2px; padding: 14px; font-size: 15px; font-weight: bold; font-family: inherit; letter-spacing: 0.5px; cursor: pointer; } #cupHeroesConfirm:hover { background: var(--main-light); } /* ── Other modals ────────────────────────────────── */ .skin-production-modal-content { width: auto; height: auto; border-radius: 4px; max-width: 85vw; } /* ── Cup Heroes slots toggle ─────────────────────── */ .cup-heroes-slots-toggle { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; color: var(--text-colour); font-size: 14px; padding: 0 6px; cursor: pointer; opacity: 0.6; transition: transform 0.2s; vertical-align: middle; } .cup-heroes-slots-toggle--open { transform: rotate(180deg); opacity: 0.9; } .hero-slots { display: none; } .hero-slots--open { display: grid; } /* ── Footer ──────────────────────────────────────── */ .dhd-logo { height: 18px; } }