/* ============================================================
   SPAR Qatar — FIFA World Cup 2026 Champion Predictor
   Design tokens — Poster Edition
   ============================================================ */
:root {
    --ink: #0a0a0a;
    --ink-soft: #161616;
    --paper: #f7f4ec;
    --spar-red: #e2231a;
    --spar-red-deep: #a8160f;
    --spar-green: #00984a;
    --spar-green-deep: #00642f;
    --fifa-gold: #ffc72c;
    --fifa-gold-deep: #d99f00;
    --ink-white: #ffffff;
    --border-hard: rgba(255, 255, 255, 0.16);
    --font-display: 'Anton', 'Archivo Black', sans-serif;
    --font-body: 'Inter', sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-body);
    background: var(--ink);
    color: var(--ink-white);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .display {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 400;
    line-height: 0.98;
}

/* ---------- Halftone dot texture (signature print-poster element) ---------- */
.halftone {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(255,255,255,0.18) 1.2px, transparent 1.2px);
    background-size: 14px 14px;
    opacity: 0.5;
    z-index: 1;
}
.halftone-dark {
    background-image: radial-gradient(rgba(0,0,0,0.35) 1.2px, transparent 1.2px);
}

/* ---------- Floating particles (confetti dots) ---------- */
#particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
    animation: float-up linear infinite;
}
@keyframes float-up {
    0%   { transform: translateY(110vh) scale(0.6) rotate(0deg); opacity: 0; }
    10%  { opacity: 0.75; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-10vh) scale(1) rotate(180deg); opacity: 0; }
}

/* ---------- Poster banner ribbon (signature element) ---------- */
.ribbon {
    background: var(--spar-red);
    transform: rotate(-2deg);
    box-shadow: 0 10px 30px -10px rgba(226, 35, 26, 0.6);
}

/* ---------- Hero photo background ---------- */
.hero-photo {
    background-image: linear-gradient(180deg, rgba(10,10,10,0.1) 0%, rgba(10,10,10,0.4) 60%, var(--ink) 100%), url('https://images.unsplash.com/photo-1728473184021-db4b277d87c1?fm=jpg&q=80&w=2200&auto=format&fit=crop');
    background-size: cover;
    background-position: center 45%;
    filter: saturate(1.25) contrast(1.08) brightness(1.04);
}
.hero-photo h1, .hero-photo p, .hero-photo .ribbon + h1 {
    text-shadow: 0 4px 20px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.95);
}
.hero-photo h1 {
    -webkit-text-stroke: 1.5px rgba(0,0,0,0.5);
    paint-order: stroke fill;
}

.section-photo {
    background-image: linear-gradient(180deg, rgba(10,10,10,0.2) 0%, rgba(10,10,10,0.6) 100%), url('https://images.unsplash.com/photo-1766756467595-fd3f1f62d562?fm=jpg&q=80&w=2200&auto=format&fit=crop');
    background-size: cover;
    background-position: center;
}
.section-photo h1, .section-photo p {
    text-shadow: 0 3px 18px rgba(0,0,0,0.85), 0 1px 4px rgba(0,0,0,0.9);
}

/* ---------- Trophy spotlight (signature hero element) ---------- */
.trophy-spotlight-wrap {
    position: relative;
    display: inline-block;
}
.trophy-spotlight-wrap::before {
    content: '';
    position: absolute;
    left: 50%; top: 45%;
    width: 340px; height: 340px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, color-mix(in srgb, var(--team-color, var(--fifa-gold)) 55%, transparent) 0%, color-mix(in srgb, var(--team-color, var(--fifa-gold)) 18%, transparent) 40%, transparent 70%);
    filter: blur(8px);
    z-index: -1;
    animation: spotlightPulse 3s ease-in-out infinite;
}
@keyframes spotlightPulse {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
}
.trophy-hero-img {
    filter: drop-shadow(0 8px 30px rgba(255,199,44,0.6));
    animation: trophyFloat 4s ease-in-out infinite;
}
@keyframes trophyFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ---------- Light rays from above (floodlight effect) ---------- */
.light-rays {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.light-rays::before, .light-rays::after {
    content: '';
    position: absolute;
    top: -10%;
    width: 45%;
    height: 130%;
    background: linear-gradient(180deg, rgba(255,255,255,0.16) 0%, transparent 75%);
    filter: blur(6px);
}
.light-rays::before { left: 5%; transform: rotate(12deg); }
.light-rays::after  { right: 5%; transform: rotate(-12deg); }

/* ---------- Poster cards (flat, hard-bordered, no blur) ---------- */
.glass, .poster-panel {
    background: #1c1c1c;
    border: 2px solid var(--border-hard);
    border-radius: 0.75rem;
}
.panel-accent { border-top: 3px solid var(--fifa-gold); }
.glass-card, .poster-card {
    background: #1c1c1c;
    border: 2px solid var(--border-hard);
    border-radius: 0.5rem;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.glass-card:hover, .poster-card:hover {
    transform: translateY(-5px);
    border-color: var(--fifa-gold);
    box-shadow: 0 14px 30px -10px rgba(255, 199, 44, 0.35);
}

/* ---------- Buttons ---------- */
.text-gold-gradient {
    color: var(--fifa-gold);
    -webkit-text-stroke: 1.5px var(--ink);
    paint-order: stroke fill;
    text-shadow: 0 4px 20px rgba(0,0,0,0.9), 0 2px 6px rgba(0,0,0,0.95);
}
.btn-gold {
    background: linear-gradient(135deg, var(--fifa-gold) 0%, var(--fifa-gold-deep) 100%);
    color: var(--spar-green-deep);
    font-weight: 800;
    border-radius: 999px;
    border: none;
    transition: transform .15s ease, box-shadow .15s ease;
    box-shadow: 0 8px 22px -6px rgba(255, 199, 44, 0.55);
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -6px rgba(255, 199, 44, 0.65); }
.btn-outline {
    border: 2px solid rgba(255,255,255,0.55);
    color: var(--ink-white);
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    transition: border-color .2s ease, background .2s ease;
}
.btn-outline:hover { border-color: var(--fifa-gold); background: rgba(255, 199, 44, 0.12); }
.btn-green {
    background: linear-gradient(135deg, var(--spar-green) 0%, var(--spar-green-deep) 100%);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    border: none;
    box-shadow: 0 8px 22px -6px rgba(0, 152, 74, 0.5);
}
.btn-red {
    background: linear-gradient(135deg, var(--spar-red) 0%, var(--spar-red-deep) 100%);
    color: #fff;
    font-weight: 800;
    border-radius: 999px;
    border: none;
    box-shadow: 0 8px 22px -6px rgba(226, 35, 26, 0.5);
}

/* ---------- Flag badges ---------- */
.flag-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--ink-white);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    flex-shrink: 0;
}
.flag-badge img { width: 100%; height: 100%; object-fit: cover; }
.flag-badge-lg { width: 96px; height: 96px; border-width: 4px; }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--fifa-gold-deep); border-radius: 99px; }

/* ---------- Confederation chip ---------- */
.chip {
    font-family: var(--font-display);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.22rem 0.65rem;
    border-radius: 999px;
    background: var(--spar-green);
    color: #fff;
    border: 2px solid var(--ink);
}

/* ---------- Skeleton loading ---------- */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,.05) 25%, rgba(255,255,255,.14) 37%, rgba(255,255,255,.05) 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s ease infinite;
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- Modal ---------- */
.modal-backdrop {
    position: fixed; inset: 0; background: rgba(10, 10, 10, 0.88);
    z-index: 50;
    display: flex; align-items: center; justify-content: center; padding: 1rem;
}

/* ---------- Fade/slide utility ---------- */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Trophy bounce (celebration) ---------- */
.trophy-bounce { animation: trophyBounce 1.6s ease-in-out infinite; }
@keyframes trophyBounce {
    0%, 100% { transform: translateY(0) rotate(-2deg); }
    50%      { transform: translateY(-18px) rotate(2deg); }
}
.cheer-pulse { animation: cheerPulse 0.9s ease-in-out infinite; }
@keyframes cheerPulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1; }
}

/* ---------- Countdown digit ---------- */
.countdown-box {
    background: var(--ink);
    border: 3px solid var(--fifa-gold);
    border-radius: 0.5rem;
    min-width: 70px;
    position: relative;
    overflow: hidden;
}
.countdown-box.tick::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--fifa-gold);
    opacity: 0;
    animation: tickFlash 0.5s ease-out;
}
@keyframes tickFlash {
    0% { opacity: 0.35; }
    100% { opacity: 0; }
}
.countdown-sep {
    font-family: var(--font-display);
    font-size: 1.75rem;
    color: var(--fifa-gold);
    animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.2; } }

/* ---------- Confederation tabs ---------- */
.tab-bar {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 0.25rem;
}
.tab-bar::-webkit-scrollbar { display: none; }
.tab-btn {
    flex-shrink: 0;
    font-family: var(--font-display);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    border: 2px solid var(--ink-white);
    color: var(--ink-white);
    background: transparent;
    white-space: nowrap;
    transition: all .15s ease;
}
.tab-btn.active {
    background: var(--fifa-gold);
    color: var(--ink);
    border-color: var(--ink);
}
.tab-btn:not(.active):hover { border-color: var(--fifa-gold); color: var(--fifa-gold); }

/* ---------- Horizontal swipe carousel (Top 10) ---------- */
.swipe-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.75rem;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.swipe-row::-webkit-scrollbar { display: none; }
.swipe-item {
    scroll-snap-align: start;
    flex-shrink: 0;
    width: 150px;
}
@media (min-width: 768px) {
    .swipe-item { width: 180px; }
}
.swipe-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 0.75rem;
}
.swipe-dots span {
    width: 6px; height: 6px; border-radius: 50%;
    background: rgba(255,255,255,0.25);
}
.swipe-dots span.active { background: var(--fifa-gold); width: 18px; border-radius: 4px; }

/* ---------- Pagination ---------- */
.page-btn {
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 2px solid var(--ink-white);
    color: var(--ink-white);
    font-family: var(--font-display);
    font-size: 0.8rem;
    background: transparent;
    transition: all .15s ease;
}
.page-btn.active { background: var(--fifa-gold); color: var(--ink); border-color: var(--ink); }
.page-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.page-btn:not(.active):not(:disabled):hover { border-color: var(--fifa-gold); color: var(--fifa-gold); }

/* ---------- Employee autocomplete dropdown ---------- */
#employee-dropdown { max-height: 280px; overflow-y: auto; }
.dropdown-item {
    display: flex; flex-direction: column; gap: 0.1rem;
    padding: 0.75rem 1rem;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid var(--border-hard);
    transition: background .12s ease;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover, .dropdown-item.active { background: rgba(255, 199, 44, 0.12); }

@media (max-width: 640px) {
    .flag-badge-lg { width: 72px; height: 72px; }
}