/* GRIDIRON ARCHIVE */
@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600&display=swap');

/* Theme: Classic (Default) */
:root,[data-theme="classic"]{--void:#050508;--abyss:#0a0a10;--charcoal:#111116;--slate:#18181f;--steel:#222230;--graphite:#2a2a3a;--iron:#363648;--gold:#c9a227;--amber:#daa520;--brass:#b8860b;--teal:#14b8a6;--mint:#34d399;--ice:#5eead4;--cream:#fafaf9;--pearl:#e7e5e4;--silver:#a8a29e;--ghost:#6b7280;--shadow:#4b5563;--primary:#14b8a6;--primary-light:#34d399;--accent:#c9a227;--accent-light:#daa520;--font-display:'Big Shoulders Display',sans-serif;--font-mono:'SF Mono',monospace;--font-body:'Inter',sans-serif;--shadow-card:0 4px 24px rgba(0,0,0,0.4);--shadow-hover:0 8px 32px rgba(0,0,0,0.5);--transition-fast:150ms ease;--transition-smooth:300ms cubic-bezier(0.4,0,0.2,1);--theme-name:'Classic'}

/* Theme: Detroit Lions */
[data-theme="lions"]{--void:#001532;--abyss:#002244;--charcoal:#003366;--slate:#004488;--steel:#1a5a9e;--graphite:#2a6ab0;--iron:#4a8ac8;--gold:#b0b7bc;--amber:#c5ccd2;--brass:#98a4ad;--teal:#0076b6;--mint:#3399cc;--ice:#66b3e0;--cream:#ffffff;--pearl:#f0f4f7;--silver:#b0b7bc;--ghost:#8899aa;--shadow:#667788;--primary:#0076b6;--primary-light:#3399cc;--accent:#b0b7bc;--accent-light:#c5ccd2;--theme-name:'Detroit Lions'}

/* Theme: Denver Broncos */
[data-theme="broncos"]{--void:#0a1628;--abyss:#0c1e36;--charcoal:#102a47;--slate:#1a3a5c;--steel:#264a70;--graphite:#355985;--iron:#4a6d96;--gold:#fc4c02;--amber:#ff6b2b;--brass:#d44000;--teal:#002244;--mint:#1a4066;--ice:#2a5580;--cream:#ffffff;--pearl:#f5f5f5;--silver:#c0c8d0;--ghost:#8090a0;--shadow:#5a6a7a;--primary:#fc4c02;--primary-light:#ff6b2b;--accent:#002244;--accent-light:#1a4066;--theme-name:'Denver Broncos'}

/* Theme: Seattle Seahawks */
[data-theme="seahawks"]{--void:#001220;--abyss:#001a2e;--charcoal:#002244;--slate:#0a3355;--steel:#1a4466;--graphite:#2a5577;--iron:#3a6688;--gold:#69be28;--amber:#7fce3f;--brass:#52a817;--teal:#a5acaf;--mint:#b8bfc2;--ice:#ccd3d6;--cream:#ffffff;--pearl:#f5f7f8;--silver:#a5acaf;--ghost:#7a8589;--shadow:#5a6266;--primary:#69be28;--primary-light:#7fce3f;--accent:#a5acaf;--accent-light:#b8bfc2;--theme-name:'Seattle Seahawks'}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;-webkit-font-smoothing:antialiased}
body{font-family:var(--font-body);background:var(--void);color:var(--pearl);line-height:1.6;min-height:100vh}
.app-container{display:grid;grid-template-columns:280px 1fr;min-height:100vh}
.sidebar{background:var(--abyss);border-right:1px solid var(--charcoal);padding:32px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column}
.logo{margin-bottom:64px;padding-bottom:32px;border-bottom:1px solid var(--charcoal)}
.logo h1{font-family:var(--font-display);font-size:2rem;font-weight:800;text-transform:uppercase;color:var(--cream)}
.logo h1 span{background:linear-gradient(135deg,var(--gold),var(--amber));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.logo .subtitle{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost);letter-spacing:0.1em;text-transform:uppercase}
.nav-menu{list-style:none;flex:1;overflow-y:auto}
.nav-menu li{margin-bottom:8px}
.nav-link{display:flex;align-items:center;gap:16px;padding:16px 24px;color:var(--silver);text-decoration:none;font-family:var(--font-mono);font-size:0.8125rem;border-radius:8px;transition:var(--transition-smooth);position:relative;-webkit-tap-highlight-color:transparent;min-height:48px}
.nav-link::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:0;background:var(--primary);border-radius:0 2px 2px 0;transition:var(--transition-smooth)}
.nav-link:hover,.nav-link:active{color:var(--cream);background:var(--charcoal)}
.nav-link.active{color:var(--cream);background:var(--slate)}
.nav-link.active::before{height:24px;background:var(--primary)}
.nav-icon{font-size:1.125rem;opacity:0.8}
.nav-icon .icon{width:20px;height:20px;stroke:currentColor}
.main-content{padding:48px 64px;background:linear-gradient(var(--void),var(--abyss));min-height:100vh}
.section{display:none}
.section.active{display:block;animation:fadeIn 0.4s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.section-header{margin-bottom:48px}
.section-header h2{font-family:var(--font-display);font-size:3.5rem;font-weight:800;text-transform:uppercase;color:var(--cream);line-height:1;margin-bottom:8px}
.section-header p{font-family:var(--font-mono);font-size:0.8125rem;color:var(--ghost)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:48px}
.stat-card{background:var(--slate);border-radius:12px;padding:32px;position:relative;overflow:hidden;transition:var(--transition-smooth)}
.stat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--amber))}
.stat-card:nth-child(2)::before{background:linear-gradient(90deg,var(--teal),var(--mint))}
.stat-card:nth-child(3)::before{background:linear-gradient(90deg,var(--amber),var(--brass))}
.stat-card:nth-child(4)::before{background:linear-gradient(90deg,var(--mint),var(--ice))}
.stat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.stat-value{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--cream);line-height:1;margin-bottom:8px}
.stat-label{font-family:var(--font-mono);font-size:0.6875rem;color:var(--ghost);letter-spacing:0.1em;text-transform:uppercase}
.card{background:var(--slate);border-radius:16px;border:1px solid var(--graphite);overflow:hidden;transition:var(--transition-smooth)}
.card:hover{border-color:var(--iron);box-shadow:var(--shadow-card)}
.card-header{padding:24px 32px;border-bottom:1px solid var(--graphite);background:var(--charcoal)}
.card-header h3{font-family:var(--font-mono);font-size:0.875rem;font-weight:500;color:var(--cream);display:flex;align-items:center;gap:8px}
.card-icon{font-size:1rem}
.card-body{padding:32px}
.dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.champions-container{padding:24px}
.champion-item{display:flex;align-items:center;gap:16px;padding:16px 0;border-bottom:1px solid var(--graphite)}
.champion-item:last-child{border-bottom:none}
.champion-item .year,.champion-year{font-family:var(--font-mono);font-size:0.875rem;font-weight:600;color:var(--gold);min-width:48px}
.champion-item .team-name,.champion-name{font-family:var(--font-body);font-size:0.875rem;color:var(--cream);flex:1}
.champion-record{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost)}
.standings-table{width:100%;border-collapse:collapse}
.standings-table th,.standings-table td{padding:16px 24px;text-align:left;border-bottom:1px solid var(--graphite)}
.standings-table th{font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;color:var(--ghost);text-transform:uppercase;letter-spacing:0.1em;background:var(--charcoal)}
.standings-table td{font-family:var(--font-mono);font-size:0.8125rem;color:var(--pearl)}
.standings-table tr:hover td{background:var(--charcoal)}
.standings-table .rank{font-weight:600;color:var(--gold);width:40px}
.standings-table .team-name{font-family:var(--font-body);font-weight:500;color:var(--cream)}
.standings-table .record{color:var(--teal)}
.champion-row{background:linear-gradient(90deg,rgba(201,162,39,0.1),transparent)!important}
.champion-row td:first-child{border-left:3px solid var(--gold)}
.records-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.record-card .card-body{display:flex;flex-direction:column;gap:16px}
.leaderboard{list-style:none}
.leaderboard-item{display:flex;align-items:center;padding:16px 0;border-bottom:1px solid var(--graphite);transition:var(--transition-fast)}
.leaderboard-item:last-child{border-bottom:none}
.leaderboard-item:hover{padding-left:8px;background:linear-gradient(90deg,rgba(20,184,166,0.05),transparent)}
.leaderboard-item .rank{width:36px;height:36px;background:var(--charcoal);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--ghost);margin-right:16px;border:1px solid var(--graphite)}
.leaderboard-item:nth-child(1) .rank{background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--void);border:none}
.leaderboard-item:nth-child(2) .rank{background:linear-gradient(135deg,#9ca3af,#6b7280);color:var(--void);border:none}
.leaderboard-item:nth-child(3) .rank{background:linear-gradient(135deg,var(--brass),#92400e);color:var(--cream);border:none}
.leader-info{flex:1}
.leader-name{font-family:var(--font-body);font-weight:600;color:var(--cream);display:block;font-size:0.9375rem}
.leader-subtitle{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost)}
.leader-value{font-family:var(--font-display);font-weight:700;color:var(--teal);font-size:1.25rem}
.h2h-controls{display:flex;gap:24px;margin-bottom:32px}
.h2h-controls select,.season-controls select{background:var(--slate);border:1px solid var(--graphite);border-radius:8px;padding:16px 24px;color:var(--cream);font-family:var(--font-mono);font-size:0.875rem;min-width:200px;cursor:pointer;transition:var(--transition-fast)}
.h2h-controls select:hover,.season-controls select:hover{border-color:var(--iron)}
.h2h-controls select:focus,.season-controls select:focus{outline:none;border-color:var(--teal)}
.h2h-container{padding:32px}
.h2h-summary{display:grid;grid-template-columns:1fr auto 1fr;gap:32px;align-items:center;margin-bottom:48px;padding:48px;background:var(--charcoal);border-radius:16px}
.h2h-team{text-align:center}
.h2h-team h3{font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--cream);text-transform:uppercase}
.h2h-wins{font-family:var(--font-display);font-size:5rem;font-weight:800;color:var(--ghost);margin-top:8px;line-height:1}
.h2h-team.leading .h2h-wins{color:var(--gold)}
.h2h-label{font-family:var(--font-mono);font-size:0.6875rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.1em;margin-top:8px}
.h2h-vs{font-family:var(--font-mono);font-size:1.5rem;color:var(--ghost);text-align:center}
.vs-big{font-size:2rem;font-weight:700;display:block}
.total-games{font-size:0.75rem;display:block;margin-top:8px}
.matrix-container{padding:32px;overflow-x:auto}
.matrix-table{border-collapse:collapse;min-width:100%}
.matrix-table th,.matrix-table td{width:56px;height:48px;text-align:center;font-family:var(--font-mono);font-size:0.6875rem;border:1px solid var(--graphite)}
.matrix-table th{background:var(--charcoal);color:var(--ghost);font-weight:500}
.matrix-table td{background:var(--slate);color:var(--cream);transition:var(--transition-fast)}
.matrix-table td:hover{transform:scale(1.05);z-index:1;box-shadow:0 0 0 2px var(--teal)}
.matrix-table td.positive{background:rgba(20,184,166,0.3);color:var(--teal);font-weight:600}
.matrix-table td.negative{background:rgba(220,38,38,0.2);color:#f87171}
.matrix-table td.neutral{background:var(--steel);color:var(--pearl)}
.matrix-table td.self{background:var(--void);color:var(--graphite)}

/* H2H Matchup History Table */
.h2h-history{margin-top:32px}
.h2h-history h4{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--cream);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--graphite)}
.h2h-table{width:100%;border-collapse:separate;border-spacing:0;border-radius:12px;overflow:hidden;background:var(--charcoal)}
.h2h-table thead{background:linear-gradient(135deg,var(--slate),var(--charcoal))}
.h2h-table th{font-family:var(--font-mono);font-size:0.6875rem;font-weight:600;color:var(--ghost);text-transform:uppercase;letter-spacing:0.08em;padding:16px 20px;text-align:center;border-bottom:2px solid var(--graphite)}
.h2h-table th:first-child{text-align:left;padding-left:24px}
.h2h-table th:nth-child(3),.h2h-table th:nth-child(4){color:var(--teal)}
.h2h-table tbody tr{transition:var(--transition-fast)}
.h2h-table tbody tr:hover{background:rgba(20,184,166,0.05)}
.h2h-table tbody tr:nth-child(even){background:rgba(0,0,0,0.15)}
.h2h-table tbody tr:nth-child(even):hover{background:rgba(20,184,166,0.08)}
.h2h-table td{font-family:var(--font-mono);font-size:0.875rem;color:var(--pearl);padding:14px 20px;text-align:center;border-bottom:1px solid var(--graphite)}
.h2h-table td:first-child{text-align:left;padding-left:24px;font-weight:600;color:var(--cream)}
.h2h-table td.winner{color:var(--teal);font-weight:700;position:relative}
.h2h-table td.winner::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--teal);border-radius:2px}
.h2h-table tbody tr:last-child td{border-bottom:none}
.h2h-table .playoff-badge{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(201,162,39,0.2),rgba(201,162,39,0.1));color:var(--gold);padding:4px 12px;border-radius:20px;font-size:0.75rem;font-weight:600}
.h2h-table .regular-badge{color:var(--ghost);font-size:0.75rem}

/* 2026 Destination Bracket */
.destination-bracket{padding:20px 0;overflow-x:auto}
.bracket-legend{display:flex;justify-content:center;gap:30px;margin-bottom:24px;padding:12px 20px;background:var(--charcoal);border-radius:8px;max-width:500px;margin-left:auto;margin-right:auto}
.bracket-legend .legend-item{display:flex;align-items:center;gap:8px;color:var(--ghost);font-size:0.8rem;font-family:var(--font-mono)}
.bracket-legend .bye-icon{color:var(--teal);font-size:0.9rem}
.bracket{display:flex;align-items:flex-start;justify-content:flex-start;gap:20px;min-width:max-content;padding:10px}
.round{display:flex;flex-direction:column}
.round-header{text-align:center;padding:10px 14px;margin-bottom:14px;background:var(--charcoal);border:1px solid var(--teal);border-radius:6px;min-width:140px}
.round-header h3{font-family:var(--font-display);font-size:0.9rem;font-weight:700;color:var(--teal);letter-spacing:0.1em;margin:0}
.round-header .date{font-family:var(--font-mono);font-size:0.65rem;color:var(--ghost);margin-top:4px}
.matchup{display:flex;flex-direction:column;width:140px;position:relative}
.dest-team{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);padding:8px 12px;font-size:0.75rem;font-family:var(--font-mono);color:var(--cream);height:34px;display:flex;align-items:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:all 0.25s ease;cursor:pointer;position:relative}
.dest-team:first-child{border-bottom:none;border-radius:4px 4px 0 0}
.dest-team:last-child{border-radius:0 0 4px 4px}
.dest-team:hover{background:linear-gradient(135deg,var(--teal),var(--mint));border-color:var(--teal);transform:scale(1.05);z-index:10;box-shadow:0 4px 20px rgba(20,184,166,0.4);color:var(--void)}
.dest-team.bye{background:linear-gradient(135deg,rgba(20,184,166,0.15),rgba(20,184,166,0.08));border-color:var(--teal)}
.dest-team.bye::after{content:'★';position:absolute;right:8px;color:var(--teal);font-size:0.6rem}
.dest-team.bye:hover::after{color:var(--void)}
.dest-team.winner-slot{background:linear-gradient(135deg,var(--slate),var(--charcoal));border:1px dashed var(--graphite);cursor:default;color:var(--ghost)}
.dest-team.winner-slot:hover{transform:none;box-shadow:none;background:linear-gradient(135deg,var(--slate),var(--charcoal));border-color:var(--graphite);color:var(--ghost)}
.matchups-r1,.matchups-r2{display:flex;flex-direction:column;gap:16px}
.matchups-q{display:flex;flex-direction:column;gap:calc(68px + 16px * 3);padding-top:calc((68px + 16px) / 2)}
.matchups-s{display:flex;flex-direction:column;gap:calc((68px + 16px) * 4 - 68px);padding-top:calc((68px + 16px) * 1.5)}
.matchups-f{padding-top:calc((68px + 16px) * 3.5)}
.round-5 .dest-team{background:linear-gradient(135deg,var(--slate),var(--charcoal));border:2px solid var(--teal);font-size:0.8rem;font-weight:600}
.trophy-section{display:flex;flex-direction:column;align-items:center;padding-top:calc((68px + 16px) * 3.5)}
.dest-trophy{font-size:3rem;margin-bottom:12px;animation:dest-float 2s ease-in-out infinite}
@keyframes dest-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.champion-slot{background:linear-gradient(135deg,rgba(20,184,166,0.2),rgba(20,184,166,0.08));border:2px solid var(--teal);padding:14px 20px;text-align:center;border-radius:8px}
.champion-slot-label{font-family:var(--font-display);color:var(--teal);font-size:0.75rem;font-weight:600;letter-spacing:0.15em;margin-bottom:6px}
.champion-slot-name{color:var(--cream);font-size:0.95rem;font-family:var(--font-mono);font-weight:600}

/* Destination Modal */
.dest-modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);backdrop-filter:blur(8px);z-index:1000;justify-content:center;align-items:center;padding:20px;animation:dest-fadeIn 0.3s ease}
.dest-modal-overlay.active{display:flex}
@keyframes dest-fadeIn{from{opacity:0}to{opacity:1}}
.dest-modal{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:2px solid var(--teal);border-radius:16px;max-width:600px;width:100%;max-height:85vh;overflow-y:auto;position:relative;animation:dest-slideUp 0.3s ease;box-shadow:0 20px 60px rgba(20,184,166,0.2)}
@keyframes dest-slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.dest-modal-header{background:linear-gradient(135deg,var(--teal),var(--mint));padding:24px 28px;position:relative}
.dest-modal-close{position:absolute;top:18px;right:20px;background:rgba(0,0,0,0.2);border:none;color:var(--void);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.4rem;display:flex;align-items:center;justify-content:center;transition:all 0.2s ease}
.dest-modal-close:hover{background:rgba(0,0,0,0.3);transform:rotate(90deg)}
.dest-modal-title{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--void);letter-spacing:0.05em;margin:0}
.dest-modal-subtitle{color:rgba(0,0,0,0.7);font-size:0.95rem;font-family:var(--font-mono);margin-top:6px}
.dest-modal-content{padding:28px}
.dest-quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:24px}
.dest-stat-box{background:rgba(0,0,0,0.25);padding:14px;border-radius:10px;text-align:center}
.dest-stat-icon{font-size:1.6rem;margin-bottom:6px}
.dest-stat-label{color:var(--ghost);font-size:0.65rem;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:0.05em}
.dest-stat-value{color:var(--teal);font-family:var(--font-display);font-size:0.85rem;font-weight:600;margin-top:4px}
.dest-info-section{margin-bottom:22px}
.dest-info-section:last-child{margin-bottom:0}
.dest-info-section h3{font-family:var(--font-display);color:var(--teal);font-size:0.9rem;font-weight:600;letter-spacing:0.08em;margin-bottom:12px;display:flex;align-items:center;gap:10px}
.dest-info-section h3::before{content:'';width:4px;height:18px;background:var(--teal);border-radius:2px}
.dest-info-list{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0}
.dest-info-list li{background:rgba(20,184,166,0.12);border:1px solid rgba(20,184,166,0.25);padding:7px 14px;border-radius:20px;font-size:0.8rem;font-family:var(--font-mono);color:var(--pearl);transition:all 0.2s ease}
.dest-info-list li:hover{background:rgba(20,184,166,0.22);border-color:var(--teal);color:var(--cream)}
.dest-highlight-box{background:linear-gradient(135deg,rgba(20,184,166,0.15),rgba(20,184,166,0.08));border-left:4px solid var(--teal);padding:16px;border-radius:0 10px 10px 0;margin-top:18px}
.dest-highlight-box p{color:var(--pearl);font-size:0.85rem;line-height:1.6;font-family:var(--font-mono);margin:0}
.dest-modal::-webkit-scrollbar{width:8px}
.dest-modal::-webkit-scrollbar-track{background:var(--charcoal)}
.dest-modal::-webkit-scrollbar-thumb{background:var(--teal);border-radius:4px}

/* Trip History Styles */
.trip-stats-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px}
.trip-stat-item{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:12px;padding:20px;text-align:center}
.trip-stat-value{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:700;color:var(--teal);margin-bottom:4px}
.trip-stat-label{font-family:var(--font-mono);font-size:0.7rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.08em}

.trip-filters{display:flex;gap:12px;margin-bottom:32px;flex-wrap:wrap}
.trip-filter-btn{background:var(--charcoal);border:1px solid var(--graphite);padding:10px 20px;border-radius:8px;color:var(--ghost);font-family:var(--font-mono);font-size:0.8rem;cursor:pointer;transition:all 0.25s ease}
.trip-filter-btn:hover{border-color:var(--teal);color:var(--pearl)}
.trip-filter-btn.active{background:linear-gradient(135deg,var(--teal),var(--mint));border-color:var(--teal);color:var(--void);font-weight:600}

.trip-timeline{display:flex;flex-direction:column;gap:16px;margin-bottom:48px}
.trip-card{display:grid;grid-template-columns:80px 1fr;gap:24px;background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:12px;padding:24px;transition:all 0.3s ease;cursor:pointer}
.trip-card:hover{border-color:var(--teal);transform:translateX(8px);box-shadow:0 4px 20px rgba(20,184,166,0.15)}
.trip-card.filtered-out{display:none}

.trip-year{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--teal);text-align:center;line-height:1;padding-top:8px}
.trip-content{display:flex;flex-direction:column;gap:12px}
.trip-location{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.trip-city{font-family:var(--font-display);font-size:1.4rem;font-weight:700;color:var(--cream)}
.trip-badge{font-family:var(--font-mono);font-size:0.65rem;padding:4px 10px;border-radius:20px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em}
.trip-badge.upcoming{background:linear-gradient(135deg,rgba(20,184,166,0.2),rgba(20,184,166,0.1));color:var(--teal);border:1px solid var(--teal)}
.trip-badge.legendary{background:linear-gradient(135deg,rgba(201,162,39,0.3),rgba(201,162,39,0.15));color:var(--gold);border:1px solid var(--gold)}
.trip-badge.origin{background:linear-gradient(135deg,rgba(99,102,241,0.2),rgba(99,102,241,0.1));color:#818cf8;border:1px solid #818cf8}
.trip-badge.special{background:var(--charcoal);color:var(--ghost);border:1px solid var(--graphite)}

.trip-winner{display:flex;align-items:center;gap:8px}
.winner-label{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.05em}
.winner-name{font-family:var(--font-display);font-size:1.1rem;font-weight:600;color:var(--gold)}
.repeat-badge{font-family:var(--font-mono);font-size:0.65rem;background:linear-gradient(135deg,rgba(201,162,39,0.25),rgba(201,162,39,0.1));color:var(--gold);padding:2px 8px;border-radius:12px}

.trip-meta{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.trip-rating{display:flex;align-items:center;gap:8px}
.trip-rating .stars{color:var(--gold);font-size:0.9rem;letter-spacing:1px}
.trip-rating .stars.gold{text-shadow:0 0 10px rgba(201,162,39,0.5)}
.trip-rating .stars.na{color:var(--ghost);font-style:italic;font-size:0.8rem}
.trip-rating .rating-text{font-family:var(--font-mono);font-size:0.7rem;color:var(--ghost)}
.trip-theme{font-family:var(--font-mono);font-size:0.85rem;color:var(--silver);font-style:italic}

.trip-leaderboard{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:16px;padding:32px;margin-top:32px}
.trip-leaderboard h3{font-family:var(--font-display);font-size:1.25rem;color:var(--cream);margin-bottom:24px;text-align:center}
.leaderboard-grid{display:flex;flex-direction:column;gap:12px}
.leader-row{display:grid;grid-template-columns:50px 1fr 100px 1fr;gap:16px;align-items:center;padding:16px 20px;background:var(--slate);border-radius:10px;transition:all 0.2s ease}
.leader-row:hover{background:var(--charcoal);transform:translateX(4px)}
.leader-row.gold{background:linear-gradient(135deg,rgba(201,162,39,0.15),rgba(201,162,39,0.05));border:1px solid rgba(201,162,39,0.3)}
.leader-row.silver{background:linear-gradient(135deg,rgba(148,163,184,0.1),rgba(148,163,184,0.05));border:1px solid rgba(148,163,184,0.2)}
.leader-rank{font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:var(--teal);text-align:center}
.leader-row.gold .leader-rank{color:var(--gold)}
.leader-row.silver .leader-rank{color:var(--silver)}
.leader-name{font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--cream)}
.leader-wins{font-family:var(--font-mono);font-size:0.8rem;color:var(--teal);text-align:center}
.leader-trips{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost)}
@keyframes fadeSlideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}

/* Settings Styles */
.settings-card{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:16px;padding:28px;margin-bottom:24px}
.settings-card h3{font-family:var(--font-display);font-size:1.25rem;color:var(--cream);margin-bottom:8px}
.settings-description{font-family:var(--font-mono);font-size:0.8rem;color:var(--ghost);margin-bottom:24px}

.theme-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.theme-option{background:var(--charcoal);border:2px solid var(--graphite);border-radius:12px;padding:16px;cursor:pointer;transition:all 0.3s ease;position:relative}
.theme-option:hover{border-color:var(--primary);transform:translateY(-2px)}
.theme-option.active{border-color:var(--primary);box-shadow:0 0 20px rgba(20,184,166,0.2)}
.theme-option.active .theme-check{display:flex}
.theme-check{display:none;position:absolute;top:10px;right:10px;width:24px;height:24px;background:var(--primary);color:var(--void);border-radius:50%;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700}

.theme-preview{width:100%;height:80px;border-radius:8px;margin-bottom:12px;position:relative;overflow:hidden}
.theme-preview.classic{background:linear-gradient(135deg,#111116,#18181f)}
.theme-preview.classic .preview-header{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#c9a227,#daa520)}
.theme-preview.classic .preview-accent{position:absolute;bottom:12px;left:12px;width:40%;height:8px;background:#14b8a6;border-radius:4px}
.theme-preview.classic .preview-dots span{background:#c9a227}

.theme-preview.lions{background:linear-gradient(135deg,#002244,#003366)}
.theme-preview.lions .preview-header{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#0076b6,#3399cc)}
.theme-preview.lions .preview-accent{position:absolute;bottom:12px;left:12px;width:40%;height:8px;background:#b0b7bc;border-radius:4px}
.theme-preview.lions .preview-dots span{background:#0076b6}

.theme-preview.broncos{background:linear-gradient(135deg,#002244,#0c1e36)}
.theme-preview.broncos .preview-header{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#fc4c02,#ff6b2b)}
.theme-preview.broncos .preview-accent{position:absolute;bottom:12px;left:12px;width:40%;height:8px;background:#fc4c02;border-radius:4px}
.theme-preview.broncos .preview-dots span{background:#fc4c02}

.theme-preview.seahawks{background:linear-gradient(135deg,#002244,#001a2e)}
.theme-preview.seahawks .preview-header{position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,#69be28,#7fce3f)}
.theme-preview.seahawks .preview-accent{position:absolute;bottom:12px;left:12px;width:40%;height:8px;background:#a5acaf;border-radius:4px}
.theme-preview.seahawks .preview-dots span{background:#69be28}

.preview-dots{position:absolute;bottom:12px;right:12px;display:flex;gap:4px}
.preview-dots span{width:6px;height:6px;border-radius:50%}

.theme-info{text-align:center}
.theme-name{display:block;font-family:var(--font-display);font-size:1rem;font-weight:600;color:var(--cream);margin-bottom:2px}
.theme-desc{font-family:var(--font-mono);font-size:0.7rem;color:var(--ghost)}

.settings-row{display:flex;align-items:center;justify-content:space-between;padding:16px 0;border-bottom:1px solid var(--graphite)}
.settings-row:last-child{border-bottom:none}
.settings-info{display:flex;flex-direction:column;gap:4px}
.settings-label{font-family:var(--font-display);font-size:0.95rem;font-weight:600;color:var(--cream)}
.settings-value{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost)}
.settings-btn{display:flex;align-items:center;gap:8px;background:var(--primary);border:none;padding:10px 20px;border-radius:8px;color:var(--void);font-family:var(--font-mono);font-size:0.8rem;font-weight:600;cursor:pointer;transition:all 0.2s ease}
.settings-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(20,184,166,0.3)}
.settings-btn.danger{background:transparent;border:1px solid #ef4444;color:#ef4444}
.settings-btn.danger:hover{background:#ef4444;color:var(--cream)}
.settings-btn .icon{width:16px;height:16px}

.season-controls{margin-bottom:32px}
.season-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.week-selector{padding:16px 32px;border-bottom:1px solid var(--graphite)}
.week-selector select{background:var(--charcoal);border:1px solid var(--graphite);border-radius:6px;padding:8px 16px;color:var(--cream);font-family:var(--font-mono);font-size:0.75rem}
.season-leaders{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.leader-item{background:var(--charcoal);padding:24px;border-radius:8px}
.leader-title{font-family:var(--font-mono);font-size:0.6875rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.1em;display:block;margin-bottom:8px}
.leader-item .leader-value{font-family:var(--font-display);font-size:1.125rem;font-weight:600;color:var(--cream)}
.form-group{margin-bottom:24px}
.form-group label{display:block;font-family:var(--font-mono);font-size:0.6875rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:8px}
.form-group input{width:100%;background:var(--charcoal);border:1px solid var(--graphite);border-radius:8px;padding:16px 24px;color:var(--cream);font-family:var(--font-mono);font-size:0.875rem;transition:var(--transition-fast)}
.form-group input:focus{outline:none;border-color:var(--teal)}
.form-group input::placeholder{color:var(--shadow)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.btn-group{display:flex;gap:16px;margin-top:32px}
.btn{font-family:var(--font-mono);font-size:0.8125rem;font-weight:500;padding:16px 32px;border-radius:8px;border:none;cursor:pointer;transition:var(--transition-smooth)}
.btn-primary{background:linear-gradient(135deg,var(--teal),var(--mint));color:var(--void)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(20,184,166,0.3)}
.btn-secondary{background:var(--charcoal);color:var(--pearl);border:1px solid var(--graphite)}
.btn-secondary:hover{background:var(--slate);border-color:var(--iron)}
.progress-bar{height:4px;background:var(--charcoal);border-radius:2px;overflow:hidden;margin-bottom:16px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--teal),var(--mint));transition:width 0.3s ease}
#progress-text{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost)}
.instructions{padding:32px}
.instructions h4{font-family:var(--font-body);font-size:0.875rem;font-weight:600;color:var(--cream);margin-bottom:16px}
.instructions ol{color:var(--silver);font-size:0.8125rem;margin-left:32px}
.instructions li{margin-bottom:8px}
.instructions code{background:var(--charcoal);padding:2px 8px;border-radius:4px;font-family:var(--font-mono);font-size:0.75rem;color:var(--teal)}
#data-status{padding:32px}
#data-status p{font-family:var(--font-mono);font-size:0.8125rem;color:var(--ghost)}
#loading-progress{padding:32px}
.matchup-item,.matchup-row{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center;padding:16px;background:var(--charcoal);border-radius:8px;margin-bottom:8px}
.matchup-item .team,.matchup-row .team{font-family:var(--font-body);font-size:0.875rem;color:var(--pearl)}
.matchup-item .team:first-child,.matchup-row .team:first-child{text-align:right}
.matchup-item .team.winner,.matchup-row .team.winner{color:var(--teal);font-weight:600}
.matchup-item .score,.matchup-row .score{font-family:var(--font-display);font-size:1rem;font-weight:700;color:var(--gold);background:var(--slate);padding:8px 16px;border-radius:6px;text-align:center;min-width:100px}
.hidden{display:none!important}
.no-data{font-family:var(--font-mono);font-size:0.8125rem;color:var(--ghost);text-align:center;padding:48px}
.winner{color:var(--teal)!important;font-weight:600}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:var(--abyss)}
::-webkit-scrollbar-thumb{background:var(--graphite);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--iron)}
/* ========== RESPONSIVE BREAKPOINTS ========== */

/* Large Desktop */
@media(max-width:1400px){
.dashboard-grid{grid-template-columns:repeat(2,1fr)}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.theme-selector{grid-template-columns:repeat(2,1fr)}
}

/* Tablet/Small Desktop */
@media(max-width:1024px){
.app-container{grid-template-columns:1fr}
.sidebar{position:fixed;left:-280px;z-index:100;transition:var(--transition-smooth);width:280px;max-width:85vw}
.sidebar.open{left:0}
.main-content{padding:24px;padding-top:70px}
.section-header h2{font-size:2.5rem}
}

/* Mobile */
@media(max-width:768px){
.stats-grid,.dashboard-grid,.season-grid{grid-template-columns:1fr}
.h2h-controls{flex-direction:column}
.h2h-summary{grid-template-columns:1fr;text-align:center}
.form-row{grid-template-columns:1fr}
.main-content{padding:12px;padding-top:65px}
.section-header{margin-bottom:24px}
.section-header h2{font-size:1.75rem}
.section-header p{font-size:0.75rem}
.stat-card{padding:20px;border-radius:10px}
.stat-value{font-size:2rem}
.stat-label{font-size:0.6rem}
.card{border-radius:12px}
.card-header{padding:14px}
.card-header h3{font-size:0.8rem}
.card-body{padding:14px}
.h2h-wins{font-size:2.5rem}
.h2h-team-name{font-size:0.85rem}
.standings-table th,.standings-table td{padding:10px 12px;font-size:0.7rem}
.records-grid{grid-template-columns:1fr;gap:16px}
.record-card{padding:16px}
.record-value{font-size:1.5rem}
.champion-item{padding:12px 0;gap:12px}
.champions-container{padding:16px}
/* Settings mobile */
.theme-selector{grid-template-columns:1fr}
.theme-option{padding:14px}
.theme-preview{height:60px}
.settings-row{flex-direction:column;gap:12px;align-items:stretch}
.settings-btn{justify-content:center}
.settings-card{padding:20px}
}

/* Small Mobile */
@media(max-width:480px){
.main-content{padding:10px;padding-top:60px}
.section-header h2{font-size:1.5rem}
.stat-card{padding:16px}
.stat-value{font-size:1.75rem}
.h2h-wins{font-size:2rem}
.h2h-label{font-size:0.6rem}
.standings-table th,.standings-table td{padding:8px;font-size:0.65rem}
.record-value{font-size:1.25rem}
.record-details{font-size:0.65rem}
.champion-year{font-size:0.75rem;min-width:40px}
.champion-name{font-size:0.8rem}
.theme-name{font-size:0.9rem}
.settings-label{font-size:0.85rem}
.settings-btn{padding:10px 16px;font-size:0.75rem}
}

/* Mobile Menu - Base styles (hidden by default) */
.mobile-menu-toggle{display:none;position:fixed;top:12px;left:12px;z-index:200;background:var(--slate);border:1px solid var(--graphite);border-radius:8px;padding:12px 16px;color:var(--cream);cursor:pointer;align-items:center;gap:8px;font-family:var(--font-mono);font-size:0.8rem;box-shadow:0 4px 15px rgba(0,0,0,0.4);-webkit-tap-highlight-color:transparent}
.mobile-menu-toggle:hover,.mobile-menu-toggle:active{background:var(--charcoal);border-color:var(--primary)}
.mobile-menu-toggle .icon{width:20px;height:20px;stroke:currentColor}
.sidebar-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(5,5,8,0.9);z-index:90;backdrop-filter:blur(4px)}
.sidebar-overlay.active{display:block}

/* Show mobile menu on tablet and below */
@media(max-width:1024px){
.mobile-menu-toggle{display:flex}
}

/* Mobile Sidebar Styles */
@media(max-width:1024px){
.sidebar{padding:24px 20px;height:100vh;overflow-y:auto}
.logo{margin-bottom:32px;padding-bottom:20px}
.logo h1{font-size:1.5rem}
.logo .subtitle{font-size:0.65rem}
.nav-menu li{margin-bottom:6px}
.nav-link{padding:14px 18px;font-size:0.8rem;min-height:52px}
}

@media(max-width:768px){
.sidebar{padding:20px 16px}
.logo{margin-bottom:24px;padding-bottom:16px}
.logo h1{font-size:1.4rem}
.nav-link{padding:16px;font-size:0.85rem;gap:14px;min-height:56px}
.nav-link span:last-child{font-size:0.9rem}
}

/* Mobile Destination Bracket */
@media(max-width:1024px){
.destination-bracket{position:relative;padding:20px 0;-webkit-overflow-scrolling:touch}
.destination-bracket::before{content:'← Swipe to explore bracket →';display:block;text-align:center;font-family:var(--font-mono);font-size:0.75rem;color:var(--teal);padding:10px 16px;margin-bottom:16px;background:linear-gradient(135deg,rgba(20,184,166,0.15),rgba(20,184,166,0.08));border:1px solid rgba(20,184,166,0.3);border-radius:8px;animation:pulse-hint 2s ease-in-out infinite}
@keyframes pulse-hint{0%,100%{opacity:0.7}50%{opacity:1}}
.bracket-legend{flex-wrap:wrap;gap:16px;font-size:0.7rem}
.round-header{min-width:120px;padding:8px 12px}
.round-header h3{font-size:0.8rem}
.matchup{width:120px}
.dest-team{padding:10px 12px;height:38px;font-size:0.7rem}
}

@media(max-width:768px){
.destination-bracket::before{font-size:0.7rem;padding:8px 12px}
.bracket{gap:12px;padding:10px 5px}
.round-header{min-width:110px;padding:6px 10px}
.round-header h3{font-size:0.75rem}
.round-header .date{font-size:0.6rem}
.matchup{width:110px}
.dest-team{padding:12px 10px;height:42px;font-size:0.68rem}
.dest-team.bye::after{right:6px;font-size:0.55rem}
.matchups-r1,.matchups-r2{gap:12px}
.matchups-q{gap:calc(52px + 12px * 3);padding-top:calc((52px + 12px) / 2)}
.matchups-s{gap:calc((52px + 12px) * 4 - 52px);padding-top:calc((52px + 12px) * 1.5)}
.matchups-f{padding-top:calc((52px + 12px) * 3.5)}
.trophy-section{padding-top:calc((52px + 12px) * 3.5)}
.dest-trophy{font-size:2.5rem}
.champion-slot{padding:12px 16px}
.champion-slot-label{font-size:0.7rem}
.champion-slot-name{font-size:0.85rem}
/* Modal mobile improvements */
.dest-modal{max-width:95vw;max-height:90vh;margin:10px;border-radius:12px}
.dest-modal-header{padding:18px 20px}
.dest-modal-title{font-size:1.5rem}
.dest-modal-subtitle{font-size:0.85rem}
.dest-modal-close{top:14px;right:14px;width:32px;height:32px;font-size:1.2rem}
.dest-modal-content{padding:20px}
.dest-quick-stats{grid-template-columns:repeat(3,1fr);gap:8px}
.dest-stat-box{padding:10px 8px}
.dest-stat-icon{font-size:1.3rem}
.dest-stat-label{font-size:0.6rem}
.dest-stat-value{font-size:0.75rem}
.dest-info-section h3{font-size:0.8rem}
.dest-info-list{gap:6px}
.dest-info-list li{padding:6px 10px;font-size:0.72rem}
.dest-highlight-box{padding:12px}
.dest-highlight-box p{font-size:0.8rem}
/* Trip History Mobile 768px */
.trip-stats-bar{grid-template-columns:repeat(2,1fr);gap:12px}
.trip-stat-item{padding:16px}
.trip-stat-value{font-size:1.25rem}
.trip-filters{gap:8px}
.trip-filter-btn{padding:8px 14px;font-size:0.75rem}
.trip-card{grid-template-columns:60px 1fr;gap:16px;padding:16px}
.trip-year{font-size:1.5rem}
.trip-city{font-size:1.1rem}
.trip-meta{gap:12px}
.trip-theme{font-size:0.75rem}
.trip-leaderboard{padding:20px}
.leader-row{grid-template-columns:40px 1fr;gap:8px;padding:12px}
.leader-wins,.leader-trips{display:none}
}

@media(max-width:480px){
.bracket-legend{flex-direction:column;gap:10px;align-items:center}
.bracket{gap:8px}
.round{gap:0}
.round-header{min-width:95px;padding:5px 8px}
.round-header h3{font-size:0.7rem;letter-spacing:0.05em}
.round-header .date{font-size:0.55rem}
.matchup{width:95px}
.dest-team{padding:10px 8px;height:40px;font-size:0.65rem}
.dest-team.bye::after{display:none}
.matchups-q{gap:calc(48px + 10px * 3);padding-top:calc((48px + 10px) / 2)}
.matchups-s{gap:calc((48px + 10px) * 4 - 48px);padding-top:calc((48px + 10px) * 1.5)}
.matchups-f{padding-top:calc((48px + 10px) * 3.5)}
.trophy-section{padding-top:calc((48px + 10px) * 3.5)}
.dest-trophy{font-size:2rem}
.champion-slot{padding:10px 12px}
.dest-quick-stats{grid-template-columns:1fr 1fr 1fr;gap:6px}
.dest-stat-box{padding:8px 6px}
.dest-stat-icon{font-size:1.1rem;margin-bottom:4px}
.dest-stat-label{font-size:0.55rem}
.dest-stat-value{font-size:0.7rem}
/* Trip History Mobile 480px */
.trip-stats-bar{grid-template-columns:1fr 1fr}
.trip-stat-item{padding:12px}
.trip-stat-value{font-size:1.1rem}
.trip-stat-label{font-size:0.6rem}
.trip-card{grid-template-columns:50px 1fr;gap:12px;padding:14px}
.trip-year{font-size:1.25rem}
.trip-city{font-size:1rem}
.trip-badge{font-size:0.6rem;padding:3px 8px}
.winner-name{font-size:0.95rem}
.trip-rating .stars{font-size:0.8rem}
}
/* ========== ADVANCED ANALYTICS - Mobile First ========== */

/* SVG Icons for Analytics */
.analytics-icon{display:inline-block;width:18px;height:18px;flex-shrink:0}
.analytics-icon-luck{background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15'/%3E%3C/svg%3E") center/contain no-repeat}
.analytics-icon-consistency{background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E") center/contain no-repeat}
.analytics-icon-clutch{background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='6'/%3E%3Ccircle cx='12' cy='12' r='2'/%3E%3C/svg%3E") center/contain no-repeat}
.analytics-icon-schedule{background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center/contain no-repeat}
.analytics-icon-method{background:var(--teal);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E") center/contain no-repeat}

/* Filter pills */
.analytics-nav{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;padding:0 0 16px;border-bottom:1px solid var(--graphite)}
.analytics-nav-btn{display:inline-flex;align-items:center;gap:6px;background:var(--charcoal);border:1px solid var(--graphite);padding:8px 12px;border-radius:8px;color:var(--ghost);font-family:var(--font-mono);font-size:0.75rem;cursor:pointer;transition:all 0.25s ease;text-decoration:none}
.analytics-nav-btn:hover{border-color:var(--teal);color:var(--pearl)}
.analytics-nav-btn.active,.analytics-nav-btn:active{background:linear-gradient(135deg,var(--teal),var(--mint));border-color:var(--teal);color:var(--void);font-weight:600}
.analytics-nav-btn .analytics-icon{width:14px;height:14px}
.analytics-nav-btn:hover .analytics-icon,.analytics-nav-btn:active .analytics-icon{background:var(--void)}

/* Stats bar - stacks on small mobile */
.analytics-stats-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
.analytics-stat-box{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:10px;padding:12px 8px;text-align:center;min-width:0}
.analytics-stat-value{display:block;font-family:var(--font-display);font-size:1.1rem;font-weight:700;margin-bottom:2px;word-break:break-word}
.analytics-stat-value.positive{color:var(--teal)}
.analytics-stat-value.negative{color:#f87171}
.analytics-stat-value.neutral{color:var(--gold)}
.analytics-stat-label{font-family:var(--font-mono);font-size:0.55rem;color:var(--ghost);text-transform:uppercase;letter-spacing:0.03em;line-height:1.2}
.analytics-stat-team{font-family:var(--font-body);font-size:0.7rem;color:var(--cream);margin-top:4px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Section container */
.analytics-block{background:linear-gradient(135deg,var(--charcoal),var(--slate));border:1px solid var(--graphite);border-radius:12px;padding:16px;margin-bottom:16px}
.analytics-block-header{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.analytics-block-header .analytics-icon{width:20px;height:20px}
.analytics-block-header h3{font-family:var(--font-display);font-size:1.1rem;font-weight:700;color:var(--cream);margin:0}
.analytics-block-desc{font-family:var(--font-mono);font-size:0.7rem;color:var(--ghost);line-height:1.4;margin-bottom:14px}

/* Team ranking cards - fully responsive */
.analytics-rankings{display:flex;flex-direction:column;gap:8px}
.analytics-team-card{display:grid;grid-template-columns:32px 1fr;gap:10px;background:var(--slate);border:1px solid var(--graphite);border-radius:8px;padding:12px;transition:all 0.2s ease}
.analytics-team-card:hover{border-color:var(--teal)}

.analytics-rank{font-family:var(--font-display);font-size:1.25rem;font-weight:800;color:var(--teal);text-align:center;line-height:1;display:flex;align-items:center;justify-content:center}
.analytics-team-card:nth-child(1) .analytics-rank{color:var(--gold)}
.analytics-team-card:nth-child(2) .analytics-rank{color:var(--silver)}
.analytics-team-card:nth-child(3) .analytics-rank{color:#cd7f32}

.analytics-team-info{display:flex;flex-direction:column;gap:6px;min-width:0}
.analytics-team-name{font-family:var(--font-display);font-size:0.9rem;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Stats grid - 2x2 on mobile, wraps properly */
.analytics-team-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 12px}
.analytics-team-stat{display:flex;flex-direction:column;min-width:0}
.analytics-team-stat-label{font-family:var(--font-mono);font-size:0.55rem;color:var(--ghost);text-transform:uppercase;line-height:1}
.analytics-team-stat-value{font-family:var(--font-display);font-size:0.85rem;font-weight:700;color:var(--pearl)}
.analytics-team-stat-value.positive{color:var(--teal)}
.analytics-team-stat-value.negative{color:#f87171}

/* Season picker - dropdown instead of carousel */
.analytics-season-picker{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.analytics-season-label{font-family:var(--font-mono);font-size:0.7rem;color:var(--ghost);text-transform:uppercase}
.analytics-season-select{background:var(--charcoal);border:1px solid var(--graphite);border-radius:6px;padding:8px 12px;color:var(--cream);font-family:var(--font-mono);font-size:0.85rem;cursor:pointer;min-width:100px}
.analytics-season-select:focus{outline:none;border-color:var(--teal)}

.analytics-season-display{background:var(--slate);border:1px solid var(--graphite);border-radius:8px;padding:12px;margin-bottom:16px}
.analytics-season-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid var(--graphite)}
.analytics-season-row:last-child{border-bottom:none;padding-bottom:0}
.analytics-season-row-label{font-family:var(--font-mono);font-size:0.6rem;color:var(--ghost);text-transform:uppercase;min-width:70px}
.analytics-season-row-team{flex:1;font-family:var(--font-body);font-size:0.85rem;font-weight:600;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.analytics-season-row-value{font-family:var(--font-display);font-size:0.9rem;font-weight:700}
.analytics-season-row-value.positive{color:var(--teal)}
.analytics-season-row-value.negative{color:#f87171}

/* Methodology box */
.analytics-method{background:var(--charcoal);border-left:3px solid var(--teal);border-radius:0 8px 8px 0;padding:10px 12px;margin-top:14px}
.analytics-method h4{font-family:var(--font-display);font-size:0.8rem;color:var(--teal);margin-bottom:4px;display:flex;align-items:center;gap:6px}
.analytics-method p{font-family:var(--font-mono);font-size:0.65rem;color:var(--ghost);line-height:1.4;margin:0}

/* Footer */
.analytics-footer{text-align:center;padding:16px 0;color:var(--ghost);font-family:var(--font-mono);font-size:0.7rem}

/* Tablet - 768px */
@media(min-width:768px){
.analytics-nav-btn{padding:10px 16px;font-size:0.8rem}
.analytics-nav-btn .analytics-icon{width:16px;height:16px}
.analytics-stats-bar{grid-template-columns:repeat(4,1fr);gap:12px}
.analytics-stat-box{padding:16px}
.analytics-stat-value{font-size:1.3rem}
.analytics-stat-label{font-size:0.65rem}
.analytics-stat-team{font-size:0.8rem}
.analytics-block{padding:20px}
.analytics-team-card{grid-template-columns:44px 1fr;gap:14px;padding:14px}
.analytics-rank{font-size:1.5rem}
.analytics-team-name{font-size:1rem}
.analytics-team-stats{grid-template-columns:repeat(4,1fr);gap:6px 16px}
.analytics-team-stat-label{font-size:0.65rem}
.analytics-team-stat-value{font-size:0.85rem}
.analytics-season-card{width:150px;padding:12px}
}

/* Desktop - 1024px */
@media(min-width:1024px){
.analytics-stats-bar{gap:16px}
.analytics-stat-box{padding:20px}
.analytics-stat-value{font-size:1.4rem}
.analytics-block{padding:24px}
.analytics-block-header h3{font-size:1.2rem}
.analytics-team-card{grid-template-columns:54px 1fr;padding:16px}
.analytics-rank{font-size:1.75rem}
.analytics-team-stats{gap:8px 20px}
.analytics-season-scroll{margin:0 -24px;padding-left:24px;padding-right:24px}
.analytics-season-card{width:170px}
}

/* Landing Page Styles */
.landing-page{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 96px);text-align:center;padding:48px 24px}
.landing-header{margin-bottom:48px}
.league-title{font-family:var(--font-display);font-size:clamp(3rem,10vw,6rem);font-weight:800;text-transform:uppercase;background:linear-gradient(135deg,var(--gold) 0%,var(--amber) 50%,var(--gold) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:0.05em;line-height:1;margin-bottom:16px;animation:shimmer 3s ease-in-out infinite}
@keyframes shimmer{0%,100%{filter:brightness(1)}50%{filter:brightness(1.2)}}
.league-tagline{font-family:var(--font-mono);font-size:1rem;color:var(--ghost);letter-spacing:0.2em;text-transform:uppercase}
.trophy-showcase{position:relative;margin-bottom:48px}
.trophy-glow{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:200px;height:200px;background:radial-gradient(circle,rgba(201,162,39,0.3) 0%,transparent 70%);border-radius:50%;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:0.5}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0.8}}
.trophy-container{position:relative;z-index:1}
.trophy-icon{width:120px;height:120px;stroke:var(--gold);filter:drop-shadow(0 0 20px rgba(201,162,39,0.5));animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.trophy-name{font-family:var(--font-display);font-size:2rem;font-weight:700;color:var(--gold);letter-spacing:0.3em;text-transform:uppercase;margin-top:24px}
.champion-showcase{background:linear-gradient(135deg,var(--slate) 0%,var(--charcoal) 100%);border:2px solid var(--gold);border-radius:24px;padding:48px 64px;margin-bottom:48px;position:relative;overflow:hidden;box-shadow:0 0 60px rgba(201,162,39,0.2)}
.champion-showcase::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gold),var(--amber),var(--gold))}
.champion-label{font-family:var(--font-mono);font-size:0.875rem;color:var(--gold);letter-spacing:0.3em;text-transform:uppercase;margin-bottom:16px}
.champion-showcase .champion-name{font-family:var(--font-display);font-size:clamp(2.5rem,6vw,4rem);font-weight:800;color:var(--cream);text-transform:uppercase;line-height:1.1;margin-bottom:16px}
.champion-subtitle{font-family:var(--font-mono);font-size:0.875rem;color:var(--silver);letter-spacing:0.1em}
.champion-confetti{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden}
.champion-confetti span{position:absolute;width:10px;height:10px;background:var(--gold);opacity:0;animation:confetti 3s ease-in-out infinite}
.champion-confetti span:nth-child(1){left:10%;animation-delay:0s;background:var(--gold)}
.champion-confetti span:nth-child(2){left:20%;animation-delay:0.2s;background:var(--amber)}
.champion-confetti span:nth-child(3){left:30%;animation-delay:0.4s;background:var(--teal)}
.champion-confetti span:nth-child(4){left:40%;animation-delay:0.6s;background:var(--gold)}
.champion-confetti span:nth-child(5){left:50%;animation-delay:0.8s;background:var(--mint)}
.champion-confetti span:nth-child(6){left:60%;animation-delay:1s;background:var(--amber)}
.champion-confetti span:nth-child(7){left:70%;animation-delay:1.2s;background:var(--gold)}
.champion-confetti span:nth-child(8){left:80%;animation-delay:1.4s;background:var(--teal)}
.champion-confetti span:nth-child(9){left:90%;animation-delay:1.6s;background:var(--gold)}
.champion-confetti span:nth-child(10){left:95%;animation-delay:1.8s;background:var(--amber)}
@keyframes confetti{0%{top:-10%;opacity:1;transform:rotate(0deg)}100%{top:110%;opacity:0;transform:rotate(720deg)}}
.landing-stats{display:flex;gap:64px;margin-bottom:48px}
.landing-stat{text-align:center}
.landing-stat-value{font-family:var(--font-display);font-size:3rem;font-weight:800;color:var(--cream);line-height:1}
.landing-stat-label{font-family:var(--font-mono);font-size:0.75rem;color:var(--ghost);letter-spacing:0.1em;text-transform:uppercase;margin-top:8px}
.explore-btn{display:inline-flex;align-items:center;gap:12px;background:linear-gradient(135deg,var(--gold),var(--amber));color:var(--void);font-family:var(--font-display);font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;padding:20px 48px;border:none;border-radius:12px;cursor:pointer;transition:var(--transition-smooth);box-shadow:0 4px 24px rgba(201,162,39,0.3)}
.explore-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(201,162,39,0.4)}
.explore-btn .icon{width:24px;height:24px;transition:transform 0.3s ease}
.explore-btn:hover .icon{transform:translateX(4px)}
@media(max-width:768px){
.landing-page{padding:20px 16px;min-height:calc(100vh - 70px)}
.landing-header{margin-bottom:32px}
.league-title{font-size:2.5rem}
.league-tagline{font-size:0.8rem;letter-spacing:0.15em}
.trophy-showcase{margin-bottom:32px}
.trophy-glow{width:150px;height:150px}
.trophy-icon{width:80px;height:80px}
.trophy-name{font-size:1.25rem;letter-spacing:0.2em;margin-top:16px}
.champion-showcase{padding:24px 20px;border-radius:16px;margin-bottom:32px}
.champion-label{font-size:0.75rem;letter-spacing:0.2em;margin-bottom:12px}
.champion-showcase .champion-name{font-size:1.75rem}
.champion-subtitle{font-size:0.75rem}
.landing-stats{flex-direction:column;gap:20px;margin-bottom:32px}
.landing-stat-value{font-size:2rem}
.landing-stat-label{font-size:0.65rem}
.explore-btn{padding:14px 28px;font-size:0.95rem;gap:10px;border-radius:10px}
.explore-btn .icon{width:20px;height:20px}
}
@media(max-width:480px){
.landing-page{padding:16px 12px}
.league-title{font-size:2rem}
.league-tagline{font-size:0.7rem}
.trophy-icon{width:70px;height:70px}
.trophy-name{font-size:1rem}
.champion-showcase{padding:20px 16px}
.champion-showcase .champion-name{font-size:1.5rem}
.champion-subtitle{font-size:0.7rem}
.landing-stat-value{font-size:1.75rem}
.explore-btn{padding:12px 24px;font-size:0.85rem;width:100%}
}

/* ===== Team Name Vote Section ===== */
.vote-container {
    max-width: 800px;
    margin: 0 auto;
}

.vote-battle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 32px;
    text-align: center;
    margin-bottom: 32px;
}

.vote-prompt {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--cream);
    margin-bottom: 24px;
}

.vote-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 24px;
}

.vote-card {
    flex: 1;
    max-width: 300px;
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--surface) 100%);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 32px 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.vote-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--gold) 0%, var(--amber) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.vote-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(201, 162, 39, 0.2);
}

.vote-card:hover::before {
    opacity: 0.1;
}

.vote-card:active {
    transform: scale(0.98);
}

.vote-name {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--cream);
    display: block;
    word-break: break-word;
}

.vote-vs {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--gold);
    text-shadow: 0 0 20px rgba(201, 162, 39, 0.5);
}

.vote-count {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--ghost);
}

.vote-count span {
    color: var(--gold);
    font-weight: 600;
}

.vote-leaderboards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 24px;
}

.vote-leaderboard {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 24px;
}

.vote-leaderboard h3 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    color: var(--cream);
    margin-bottom: 16px;
    text-align: center;
}

.vote-leaderboard.best {
    border-top: 3px solid var(--gold);
}

.vote-leaderboard.worst {
    border-top: 3px solid var(--danger);
}

.vote-ranking {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: ranking;
}

.vote-ranking li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--surface-alt);
    border-radius: 8px;
    margin-bottom: 8px;
    counter-increment: ranking;
}

.vote-ranking li:last-child {
    margin-bottom: 0;
}

.vote-ranking li::before {
    content: counter(ranking);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    color: var(--gold);
    min-width: 24px;
    text-align: center;
}

.vote-ranking .name {
    flex: 1;
    font-size: 0.95rem;
    color: var(--cream);
}

.vote-ranking .elo {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ghost);
}

.vote-ranking .votes {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ghost);
    opacity: 0.7;
}

.vote-ranking li.loading {
    justify-content: center;
    color: var(--ghost);
}

.vote-ranking li.loading::before {
    display: none;
}

.vote-info {
    text-align: center;
}

.vote-info p {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--ghost);
    opacity: 0.7;
}

/* Vote animation */
@keyframes voteFlash {
    0% { background: rgba(201, 162, 39, 0.3); }
    100% { background: transparent; }
}

.vote-card.voted {
    animation: voteFlash 0.5s ease;
}

/* Mobile styles */
@media (max-width: 768px) {
    .vote-battle {
        padding: 24px 16px;
    }

    .vote-prompt {
        font-size: 1.25rem;
    }

    .vote-options {
        flex-direction: column;
        gap: 16px;
    }

    .vote-card {
        max-width: 100%;
        width: 100%;
        padding: 24px 20px;
    }

    .vote-vs {
        font-size: 1.25rem;
    }

    .vote-leaderboards {
        grid-template-columns: 1fr;
    }

    .vote-leaderboard {
        padding: 20px 16px;
    }
}

/* ============================================================
   SAYULITA 2026 LANDING PAGE
   ============================================================ */

.say-landing { margin-top: 48px; }

/* Hero Banner */
.say-hero {
    position: relative;
    height: 500px;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}

.say-hero-bg {
    position: absolute;
    inset: 0;
    filter: brightness(0.35) saturate(1.2);
}

.say-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.say-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(5,5,8,0.3) 0%,
        rgba(5,5,8,0.15) 40%,
        rgba(5,5,8,0.7) 80%,
        rgba(5,5,8,1) 100%
    );
}

.say-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
}

.say-badge {
    display: inline-block;
    padding: 6px 20px;
    border: 1px solid var(--teal);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 24px;
    background: rgba(20,184,166,0.12);
}

.say-hero-title {
    font-family: var(--font-display);
    font-size: clamp(56px, 10vw, 100px);
    letter-spacing: 6px;
    color: var(--gold);
    line-height: 0.95;
    margin-bottom: 8px;
    text-shadow: 0 0 60px rgba(201,162,39,0.3);
}

.say-hero-subtitle {
    font-family: var(--font-display);
    font-size: clamp(24px, 4vw, 42px);
    letter-spacing: 8px;
    color: var(--pearl);
    opacity: 0.9;
    margin-bottom: 28px;
}

.say-hero-dates {
    font-family: var(--font-mono);
    font-size: 15px;
    letter-spacing: 3px;
    color: var(--silver);
    margin-bottom: 8px;
}

.say-hero-tagline {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--ghost);
    letter-spacing: 2px;
}

/* Section Basics */
.say-section {
    padding: 64px 0;
}

.say-weather-bg {
    background: var(--abyss);
    border-radius: 16px;
    padding: 64px 32px;
    margin: 16px 0;
    border: 1px solid rgba(20,184,166,0.1);
}

.say-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px;
}

.say-title {
    font-family: var(--font-display);
    font-size: clamp(36px, 5vw, 52px);
    letter-spacing: 3px;
    color: var(--gold);
    margin-bottom: 16px;
}

.say-desc {
    font-size: 15px;
    color: var(--silver);
    max-width: 700px;
    line-height: 1.8;
}

/* House Section */
.say-house-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: start;
}

.say-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 240px 180px;
    gap: 10px;
}

.say-img-card {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(20,184,166,0.15);
}

.say-img-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.say-img-card:hover img {
    transform: scale(1.05);
}

.say-img-wide {
    grid-column: 1 / -1;
}

.say-amenities {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    align-content: start;
}

.say-amenity {
    background: var(--slate);
    border: 1px solid rgba(20,184,166,0.15);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--silver);
    line-height: 1.5;
    transition: border-color var(--transition-smooth);
}

.say-amenity:hover {
    border-color: var(--teal);
}

.say-amenity strong {
    color: var(--pearl);
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.say-amenity-icon {
    font-size: 20px;
    width: 36px;
    text-align: center;
    flex-shrink: 0;
}

.say-house-link {
    grid-column: 1 / -1;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: rgba(201,162,39,0.12);
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 3px;
    color: var(--gold);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: all var(--transition-smooth);
    justify-self: start;
}

.say-house-link:hover {
    background: rgba(201,162,39,0.25);
    border-color: var(--gold);
}

/* Weather */
.say-weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 40px;
    align-items: center;
}

.say-weather-card {
    background: var(--slate);
    border: 1px solid rgba(20,184,166,0.15);
    border-radius: 16px;
    padding: 36px;
    text-align: center;
}

.say-temp {
    font-family: var(--font-display);
    font-size: 72px;
    color: var(--gold);
    line-height: 1;
}

.say-temp-label {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--ghost);
    margin-top: 4px;
}

.say-weather-details {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-top: 28px;
}

.say-wd {
    text-align: center;
    padding: 14px 8px;
    background: var(--void);
    border-radius: 10px;
    border: 1px solid rgba(20,184,166,0.08);
}

.say-wd-icon { font-size: 22px; margin-bottom: 6px; }
.say-wd-val { font-family: var(--font-display); font-size: 22px; color: var(--teal); }
.say-wd-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: var(--ghost); margin-top: 2px; }

.say-weather-text h3 {
    font-family: var(--font-display);
    font-size: 26px;
    color: var(--pearl);
    letter-spacing: 2px;
    margin-bottom: 16px;
}

.say-weather-text p {
    font-size: 14px;
    color: var(--silver);
    line-height: 1.8;
    margin-bottom: 14px;
}

.say-tip {
    background: var(--slate);
    border-left: 3px solid var(--teal);
    padding: 14px 18px;
    border-radius: 0 4px 4px 0;
    margin-top: 20px;
}

.say-tip p {
    font-size: 13px;
    color: var(--silver);
    margin: 0;
}

/* Activities */
.say-activities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.say-activity-card {
    background: var(--slate);
    border: 1px solid rgba(20,184,166,0.15);
    border-radius: 16px;
    overflow: hidden;
    transition: all var(--transition-smooth);
}

.say-activity-card:hover {
    border-color: var(--teal);
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.say-activity-img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.say-activity-body {
    padding: 24px;
}

.say-tag {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(20,184,166,0.12);
    border: 1px solid rgba(20,184,166,0.2);
    border-radius: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 12px;
}

.say-tag-gold {
    background: rgba(201,162,39,0.15);
    border-color: rgba(201,162,39,0.25);
    color: var(--gold);
}

.say-activity-body h3 {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 2px;
    color: var(--pearl);
    margin-bottom: 10px;
}

.say-activity-body p {
    font-size: 13px;
    color: var(--silver);
    line-height: 1.7;
}

.say-link {
    display: inline-block;
    margin-top: 14px;
    color: var(--teal);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1px;
    transition: letter-spacing var(--transition-smooth);
}

.say-link:hover { letter-spacing: 3px; }

.say-link-gold { color: var(--gold); }

/* Tequila Feature */
.say-tequila {
    margin-top: 32px;
    background: var(--slate);
    border: 1px solid rgba(201,162,39,0.25);
    border-radius: 16px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.say-tequila-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 300px;
}

.say-tequila-body {
    padding: 36px;
}

.say-tequila-title {
    font-family: var(--font-display);
    font-size: 30px;
    letter-spacing: 2px;
    color: var(--gold);
    margin: 14px 0 12px;
}

.say-tequila-body p {
    font-size: 13px;
    color: var(--silver);
    line-height: 1.8;
    margin-bottom: 12px;
}

.say-tequila-note {
    color: var(--teal) !important;
    font-family: var(--font-mono);
    font-size: 12px !important;
    letter-spacing: 1px;
}

/* Timeline / Itinerary */
.say-timeline {
    margin-top: 40px;
    position: relative;
    padding-left: 28px;
}

.say-timeline::before {
    content: '';
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--teal), var(--gold), var(--teal));
    opacity: 0.3;
}

.say-day {
    position: relative;
    padding-left: 36px;
    margin-bottom: 40px;
}

.say-day:last-child { margin-bottom: 0; }

.say-dot {
    position: absolute;
    left: -8px;
    top: 5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--abyss);
    border: 2px solid var(--teal);
    box-shadow: 0 0 10px rgba(20,184,166,0.3);
}

.say-dot-gold {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 14px rgba(201,162,39,0.4);
}

.say-day-header {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 12px;
}

.say-day-name {
    font-family: var(--font-display);
    font-size: 28px;
    color: var(--gold);
    letter-spacing: 2px;
}

.say-day-date {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--ghost);
}

.say-event {
    background: var(--slate);
    border: 1px solid rgba(20,184,166,0.12);
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 10px;
    font-size: 13px;
    color: var(--silver);
    line-height: 1.6;
}

.say-event strong {
    color: var(--pearl);
    font-family: var(--font-display);
    font-size: 18px;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 4px;
}

.say-draft-event {
    border-color: var(--gold) !important;
    background: rgba(201,162,39,0.1);
    box-shadow: 0 0 20px rgba(201,162,39,0.08);
}

.say-time {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--teal);
    letter-spacing: 1px;
    white-space: nowrap;
    min-width: 65px;
    padding-top: 5px;
}

/* Logistics */
.say-logistics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
}

.say-logi-card {
    background: var(--slate);
    border: 1px solid rgba(20,184,166,0.15);
    border-radius: 16px;
    padding: 28px;
}

.say-logi-icon { font-size: 26px; margin-bottom: 14px; }

.say-logi-card h3 {
    font-family: var(--font-display);
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--pearl);
    margin-bottom: 12px;
}

.say-logi-card p {
    font-size: 13px;
    color: var(--silver);
    line-height: 1.7;
}

.say-teal { color: var(--teal); font-weight: 500; }
.say-gold-text { color: var(--gold); font-weight: 600; }

/* Gallery */
.say-gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 220px 220px;
    gap: 10px;
    margin-top: 40px;
}

.say-gal-wide {
    grid-column: span 2;
}

/* CTA */
.say-cta {
    text-align: center;
    padding: 80px 0 40px;
}

.say-cta .say-label, .say-cta .say-title {
    text-align: center;
}

.say-cta-tagline {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--silver);
    letter-spacing: 2px;
    margin-bottom: 32px;
}

.say-cta-quote {
    font-size: 15px;
    color: var(--ghost);
    padding-top: 24px;
    border-top: 1px solid rgba(20,184,166,0.15);
    max-width: 400px;
    margin: 0 auto;
}

/* Sayulita Responsive */
@media (max-width: 968px) {
    .say-house-grid, .say-weather-grid, .say-tequila { grid-template-columns: 1fr; }
    .say-activities { grid-template-columns: 1fr 1fr; }
    .say-logistics { grid-template-columns: 1fr; }
    .say-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
    .say-gal-wide { grid-column: 1 / -1; }
    .say-gallery .say-img-card { height: 200px; }
    .say-tequila-img { min-height: 250px; }
}

@media (max-width: 640px) {
    .say-activities { grid-template-columns: 1fr; }
    .say-amenities { grid-template-columns: 1fr; }
    .say-hero { height: 350px; }
    .say-weather-bg { padding: 40px 20px; }
    .say-images { grid-template-rows: 180px 140px; }
}