*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0 !important; padding: 0 !important; overflow-x: hidden; }
:root {
  --bg-primary: #0d0805; --bg-secondary: #1a1008; --bg-card: #1c1209;
  --neon-orange: #ff6b35; --neon-blue: #00d4ff; --neon-green: #39ff14;
  --neon-pink: #ff1493; --neon-yellow: #ffe600; --neon-purple: #bf00ff;
  --text-primary: #f0e6d3; --text-secondary: #a89880; --text-dim: #6b5e50;
}
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.6; }

/* RAIN EFFECT (was missing — caused black gap at top) */
.rain-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; opacity: 0.15; }
.raindrop { position: absolute; width: 1px; background: linear-gradient(180deg, transparent, rgba(200,200,255,0.6)); animation: rain linear infinite; }
@keyframes rain { 0% { transform: translateY(-100vh); } 100% { transform: translateY(100vh); } }

/* TOAST FADE-OUT (used by addToPlanner) */
@keyframes fadeOut { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* HEADER */
.header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: 18px 64px; display: flex; justify-content: space-between; align-items: center; background: linear-gradient(180deg, rgba(13,8,5,0.95) 0%, rgba(13,8,5,0.7) 70%, transparent 100%); backdrop-filter: blur(10px); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-left: 12px; }
.logo-text { font-family: 'JetBrains Mono', monospace; font-size: 1.8rem; font-weight: 900; letter-spacing: 4px; background: linear-gradient(90deg, #ff6b35, #ff1493, #00d4ff, #39ff14, #ffe600, #ff6b35); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientMove 3s linear infinite, flicker 4s ease-in-out infinite; position: relative; }
.logo-text::after { content: 'GAMNITE'; position: absolute; left: 0; top: 0; background: inherit; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientMove 3s linear infinite; filter: blur(8px); opacity: 0.6; z-index: -1; }
@keyframes gradientMove { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }
@keyframes flicker { 0%, 100% { opacity: 1; } 92% { opacity: 1; } 93% { opacity: 0.3; } 94% { opacity: 1; } 96% { opacity: 0.5; } 97% { opacity: 1; } }
.nav { display: flex; gap: 40px; align-items: center; margin-right: 12px; }
.nav a { color: var(--text-primary); text-decoration: none; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.5px; position: relative; padding: 4px 0; transition: color 0.3s ease; }
.nav a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--neon-orange), var(--neon-blue)); transition: width 0.3s ease; box-shadow: 0 0 8px var(--neon-orange); }
.nav a:hover { color: var(--neon-orange); text-shadow: 0 0 10px rgba(255,107,53,0.5); }
.nav a:hover::after { width: 100%; }
.nav-planner-link { display: flex; align-items: center; gap: 6px; }
.nav-planner-badge { background: var(--neon-orange); color: #000; font-size: 0.75rem; font-weight: 700; padding: 2px 8px; border-radius: 12px; box-shadow: 0 0 8px rgba(255,107,53,0.4); }
.mobile-toggle { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; z-index: 1001; }
.mobile-toggle span { width: 28px; height: 2px; background: var(--text-primary); transition: all 0.3s ease; }

/* HERO (flush to top, zero gap) */
.hero { position: relative; min-height: 100vh; width: 100%; margin: 0; padding: 110px 48px 60px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.hero-overlay { position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(13,8,5,0.92) 0%, transparent 75%), linear-gradient(180deg, rgba(13,8,5,0.3) 0%, transparent 10%, transparent 90%, rgba(13,8,5,0.6) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 900px; margin: 0 auto; }
.hero-eyebrow { font-size: 0.85rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--neon-orange); text-shadow: 0 0 15px rgba(255,107,53,0.6); margin-bottom: 20px; }
.hero-title { font-family: 'JetBrains Mono', monospace; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; line-height: 1.1; margin-bottom: 24px; background: linear-gradient(90deg, #ff6b35, #ff8c42, #ff1493, #00d4ff, #ff6b35); background-size: 300% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientMove 4s linear infinite, flicker 5s ease-in-out infinite; filter: drop-shadow(0 0 20px rgba(255,107,53,0.4)); }
.hero-subtitle-h2 { font-family: 'Inter', sans-serif; font-size: 1.3rem; font-weight: 600; color: var(--neon-blue); text-shadow: 0 0 15px rgba(0,212,255,0.5), 0 0 30px rgba(0,212,255,0.2); letter-spacing: 0.5px; margin-bottom: 60px; max-width: 700px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.search-container { width: 100%; max-width: 560px; margin: 0 auto; position: relative; }
.search-bar { width: 100%; padding: 16px 56px 16px 24px; border: 2px solid transparent; border-radius: 50px; background: linear-gradient(rgba(26,16,8,0.85), rgba(26,16,8,0.85)) padding-box, linear-gradient(90deg, #ff6b35, #ff1493) border-box; color: var(--text-primary); font-size: 1rem; font-family: 'Inter', sans-serif; outline: none; transition: all 0.4s ease; }
.search-bar::placeholder { color: var(--text-dim); }
.search-bar:focus { background: linear-gradient(rgba(13,8,5,0.95), rgba(13,8,5,0.95)) padding-box, linear-gradient(90deg, #ff6b35, #ff1493) border-box; box-shadow: 0 0 20px rgba(255,107,53,0.3), 0 0 40px rgba(255,20,147,0.15); }
.search-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: none; background: linear-gradient(135deg, #ff6b35, #ff1493); color: var(--bg-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 0 12px rgba(255,107,53,0.3), 0 0 24px rgba(255,20,147,0.15); }
.search-btn:hover { transform: translateY(-50%) scale(1.1); }
.scroll-indicator { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; opacity: 0.6; animation: scrollBounce 2s ease-in-out infinite; }
.scroll-indicator span { font-size: 0.7rem; letter-spacing: 3px; text-transform: uppercase; color: var(--text-dim); }
@keyframes scrollBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(8px); } }

/* PATH CARDS (OVERLAP) */
.path-overlap { margin-top: -300px; position: relative; z-index: 10; padding-top: 20px; padding-bottom: 40px; }
.paths-grid { display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
.path-card { flex: 1; min-width: 200px; max-width: 240px; background: var(--bg-card); border-radius: 16px; padding: 36px 24px; text-align: center; cursor: pointer; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }
.path-card::before { content: ''; position: absolute; inset: -3px; border-radius: 19px; padding: 5px; background: linear-gradient(135deg, transparent 40%, var(--neon-orange) 50%, transparent 60%); background-size: 200% 200%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 3s linear infinite; opacity: 1; z-index: 0; }
.path-card.blue::before { background: linear-gradient(135deg, transparent 40%, var(--neon-blue) 50%, transparent 60%); background-size: 200% 200%; }
.path-card.pink::before { background: linear-gradient(135deg, transparent 40%, var(--neon-pink) 50%, transparent 60%); background-size: 200% 200%; }
.path-card:hover::before { opacity: 1; background: linear-gradient(135deg, transparent 20%, var(--neon-orange) 50%, transparent 80%); }
.path-card:hover { transform: translateY(-8px); border-color: transparent; background: rgba(255,107,53,0.12); }
.path-card.blue:hover::before { background: linear-gradient(135deg, transparent 20%, var(--neon-blue) 50%, transparent 80%); }
.path-card.blue:hover { background: rgba(0,212,255,0.12); }
.path-card.pink:hover::before { background: linear-gradient(135deg, transparent 20%, var(--neon-pink) 50%, transparent 80%); }
.path-card.pink:hover { background: rgba(255,20,147,0.12); }
@keyframes borderRotate { 0% { background-position: 0% 0%; } 100% { background-position: 200% 200%; } }
.path-icon { width: 64px; height: 64px; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; position: relative; }
.path-icon svg { width: 48px; height: 48px; transition: filter 0.4s ease; }
.path-card:hover .path-icon svg { filter: drop-shadow(0 0 12px currentColor); }
.path-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.path-card p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.5; }
.path-link { display: inline-block; margin-top: 18px; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; padding: 8px 20px; border-radius: 20px; transition: all 0.3s ease; }
.path-card.orange .path-link { color: var(--neon-orange); border: 1px solid var(--neon-orange); }
.path-card.orange .path-link:hover { background: var(--neon-orange); color: #000; }
.path-card.blue .path-link { color: var(--neon-blue); border: 1px solid var(--neon-blue); }
.path-card.blue .path-link:hover { background: var(--neon-blue); color: #000; }
.path-card.pink .path-link { color: var(--neon-pink); border: 1px solid var(--neon-pink); }
.path-card.pink .path-link:hover { background: var(--neon-pink); color: #000; }

/* SECTION COMMON */
.section { padding: 100px 48px; max-width: 1200px; margin: 0 auto; }
.section-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: var(--neon-blue); text-shadow: 0 0 15px rgba(0,212,255,0.5); margin-bottom: 12px; text-align: center; }
.gradient-heading { font-family: 'JetBrains Mono', monospace; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 800; text-align: center; margin-bottom: 35px; background: linear-gradient(90deg, #ff6b35, #ff1493, #00d4ff, #39ff14, #ffe600, #ff6b35); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientMove 4s linear infinite, flicker 5s ease-in-out infinite; }
.section-subtitle { text-align: center; color: var(--text-secondary); font-size: 1.05rem; max-width: 550px; margin: 0 auto 56px; }

/* FILTERS — Party = solid darker green (not neon) */
.filter-wrapper { display: flex; justify-content: center; gap: 16px; margin: 50px 0 55px 0; flex-wrap: wrap; }
.filter-pill { background: var(--bg-primary); color: var(--text-secondary); border: 1.5px solid var(--text-dim); padding: 10px 24px; border-radius: 50px; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.filter-pill[data-cat="Board"] { color: #00d4ff; border-color: #00d4ff; }
.filter-pill[data-cat="Card"] { color: #ff6b35; border-color: #ff6b35; }
.filter-pill[data-cat="Party"] { color: #16a34a; border-color: #16a34a; }
.filter-pill[data-cat="all"] { color: #d4c5a9; border-color: #6b5e50; }
.filter-pill:hover { transform: translateY(-2px); filter: brightness(1.2); }
.filter-pill.active { color: #000; border: none; font-weight: 700; letter-spacing: 0.5px; }
.filter-pill[data-cat="all"].active { background: linear-gradient(90deg, #ff6b35, #ff1493, #00d4ff, #39ff14, #ffe600, #ff6b35); background-size: 200% auto; animation: gradientMove 3s linear infinite; }
.filter-pill[data-cat="Board"].active { background: #00d4ff; box-shadow: 0 0 12px rgba(0,212,255,0.5); }
.filter-pill[data-cat="Card"].active { background: linear-gradient(90deg, #ff6b35, #ff1493); box-shadow: 0 0 12px rgba(255,107,53,0.5); }
.filter-pill[data-cat="Party"].active { background: #16a34a; box-shadow: 0 0 12px rgba(22,163,74,0.5); }

/* GAME GRID & PILLS — Animated gradient borders + gradient text */
.game-scroll-wrapper { max-height: 520px; overflow-y: auto; padding: 10px; border: 1px solid rgba(255,255,255,0.05); border-radius: 20px; background: rgba(26,16,8,0.3); }
.games-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-content: flex-start; }
.game-scroll-wrapper::-webkit-scrollbar { width: 8px; }
.game-scroll-wrapper::-webkit-scrollbar-track { background: #000; border-radius: 10px; }
.game-scroll-wrapper::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-orange), var(--neon-pink)); border-radius: 10px; border: 2px solid #000; }

/* Game Pill Base — no direct border, uses ::before for animated gradient */
.game-pill {
  background: transparent;
  border: none;
  padding: 10px 14px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  position: relative;
  z-index: 0;
}
.game-pill svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Animated gradient border via ::before pseudo-element */
.game-pill::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50px;
  padding: 1.5px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Board: blue border with subtle glow */
.game-pill[data-cat="Board"] { color: #ffffff; box-shadow: 0 0 8px rgba(0,212,255,0.15); }
.game-pill[data-cat="Board"]::before {
  background: linear-gradient(135deg, #00d4ff, #0099cc);
}

/* Card: orange-to-pink gradient border + gradient text + subtle glow */
.game-pill[data-cat="Card"] { color: #ffffff; box-shadow: 0 0 8px rgba(255,107,53,0.15); }
.game-pill[data-cat="Card"] span {
  background: none;
  -webkit-text-fill-color: #ffffff;
  color: #ffffff;
}
.game-pill[data-cat="Card"]::before {
  background: linear-gradient(135deg, #ff6b35, #ff1493);
}

/* Party: solid darker green border + text + subtle glow */
.game-pill[data-cat="Party"] { color: #ffffff; box-shadow: 0 0 8px rgba(22,163,74,0.15); }
.game-pill[data-cat="Party"]::before {
  background: #16a34a;
}

/* Pill border — static gradient with subtle glow (mild, no sweeping animation) */

/* Hover & Added states — solid fill, hide animated border, override gradient text to black */
.game-pill:hover,
.game-pill.added {
  border-color: transparent;
  color: #000;
  text-shadow: none;
  transform: translateY(-1px);
}
.game-pill:hover::before,
.game-pill.added::before {
  opacity: 0;
}
/* Override gradient text with solid black when hovered/added */
.game-pill:hover span,
.game-pill.added span {
  -webkit-text-fill-color: #000;
  background: none;
}

.game-pill[data-cat="Board"]:hover,
.game-pill[data-cat="Board"].added { background: #00d4ff; box-shadow: 0 0 14px rgba(0,212,255,0.4); }
.game-pill[data-cat="Card"]:hover,
.game-pill[data-cat="Card"].added { background: linear-gradient(90deg, #ff6b35, #ff1493); box-shadow: 0 0 14px rgba(255,107,53,0.4); }
.game-pill[data-cat="Party"]:hover,
.game-pill[data-cat="Party"].added { background: #16a34a; box-shadow: 0 0 14px rgba(22,163,74,0.4); }

/* Quick-add button (no overlap with animated border) */
.quick-add {
  width: 24px; height: 24px;
  background: rgba(13,8,5,0.7);
  border: 1.5px solid currentColor;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; color: inherit;
  flex-shrink: 0;
  margin-left: 10px;
  opacity: 0.8; cursor: pointer; transition: all 0.2s ease;
}
.game-pill:hover .quick-add,
.game-pill.added .quick-add {
  opacity: 1; background: #000; color: #fff; border-color: #fff;
}

/* QUIZ & PLANNER PREVIEW */
.quiz-panel { background: var(--bg-card); border: 1px solid var(--neon-pink); border-radius: 20px; padding: 40px; max-width: 800px; margin: 0 auto; text-align: center; position: relative; overflow: hidden; box-shadow: 0 0 30px rgba(255,20,147,0.15); }
.quiz-controls { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.neon-select { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--neon-blue); padding: 10px 16px; border-radius: 20px; font-family: 'Inter', sans-serif; font-weight: 500; cursor: pointer; outline: none; }
.quiz-results { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.winner-card { background: rgba(0, 212, 255, 0.1); border: 1px solid var(--neon-blue); border-radius: 12px; padding: 20px; width: 220px; cursor: pointer; transition: 0.3s; }
.winner-card:hover { transform: translateY(-5px); box-shadow: 0 0 20px rgba(0,212,255,0.3); }
.winner-card h3 { color: var(--neon-orange); font-family: 'JetBrains Mono'; margin-bottom: 5px; }
.winner-card p { font-size: 0.8rem; color: var(--text-secondary); }
.planner-preview-card { background: var(--bg-card); border: 2px solid var(--neon-blue); border-radius: 16px; padding: 32px; text-align: center; max-width: 500px; margin: 0 auto; box-shadow: 0 0 20px rgba(0,212,255,0.15), inset 0 0 15px rgba(0,212,255,0.05); }
.preview-icon { font-size: 2.5rem; margin-bottom: 12px; text-shadow: 0 0 15px rgba(0,212,255,0.4); }

/* PLANNER PAGE */
.planner-card { background: var(--bg-card); border: 1px solid var(--neon-green); border-radius: 20px; padding: 40px; max-width: 860px; margin: 0 auto; position: relative; box-shadow: 0 0 30px rgba(57,255,20,0.15); }
.planner-form { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; align-items: flex-end; }
.input-group { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.input-group label { font-family: 'JetBrains Mono'; font-size: 0.85rem; color: var(--neon-blue); }
.neon-input { background: #0d0805; color: var(--text-primary); border: 1px solid var(--neon-blue); padding: 10px; border-radius: 10px; font-family: 'Inter'; outline: none; }
.neon-input:focus { border-color: var(--neon-green); box-shadow: 0 0 10px rgba(57,255,20,0.3); }
/* Date & time inputs — must use color-scheme:dark so browser picker is usable */
input[type="date"].neon-input,
input[type="time"].neon-input,
input[type="datetime-local"].neon-input {
  color-scheme: dark;
  background: #0d0805;
}
.number-control { display: flex; align-items: center; gap: 0; }
.number-control .neon-input { width: 60px; text-align: center; border-radius: 0; border-left: none; border-right: none; }
.control-btn { background: #000; border: 1px solid var(--neon-blue); color: var(--neon-blue); width: 30px; height: 40px; cursor: pointer; font-size: 1.2rem; display: flex; align-items: center; justify-content: center; transition: 0.3s; }
.control-btn:first-child { border-radius: 10px 0 0 10px; border-right: none; }
.control-btn:last-child { border-radius: 0 10px 10px 0; border-left: none; }
.control-btn:hover { background: var(--neon-blue); color: #000; }

/* PLANNER SUMMARY STATS BAR */
.planner-summary-bar {
  display: flex; justify-content: center; gap: 40px; margin: 0 auto 32px;
  padding: 20px 32px; background: rgba(26,16,8,0.6); border: 1px solid rgba(0,212,255,0.15);
  border-radius: 16px; max-width: 600px; backdrop-filter: blur(8px);
}
.summary-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.summary-num { font-family: 'JetBrains Mono', monospace; font-size: 1.6rem; font-weight: 900; color: var(--neon-orange); text-shadow: 0 0 10px rgba(255,107,53,0.4); }
.summary-label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 2px; }

/* PLANNER GAME ROWS */
.planner-game-row {
  display: flex; align-items: center; gap: 14px;
  background: rgba(0,0,0,0.35); border: 1px solid rgba(255,20,147,0.12);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 8px;
  transition: border-color 0.3s, background 0.3s;
}
.planner-game-row:hover { border-color: rgba(255,20,147,0.3); background: rgba(0,0,0,0.5); }
.game-row-order {
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,107,53,0.15); border-radius: 8px; flex-shrink: 0;
  font-family: 'JetBrains Mono', monospace; font-weight: 800; font-size: 0.9rem; color: var(--neon-orange);
}
.game-row-info { flex: 1; min-width: 0; }
.game-row-name { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 4px; }
.game-row-badges { display: flex; gap: 6px; flex-wrap: wrap; }
.game-row-badge {
  font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600;
  border: 1px solid rgba(255,255,255,0.15); color: var(--text-dim);
  background: rgba(255,255,255,0.03); white-space: nowrap;
}
.game-row-schedule { display: flex; flex-direction: column; align-items: center; gap: 2px; flex-shrink: 0; }
.schedule-input { text-align: center; }
.game-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.game-row-btn {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px;
  color: var(--text-dim); font-size: 0.7rem; cursor: pointer; transition: 0.2s;
}
.game-row-btn:hover { border-color: var(--neon-blue); color: var(--neon-blue); background: rgba(0,212,255,0.08); }
.game-row-btn-danger:hover { border-color: var(--neon-orange); color: var(--neon-orange); background: rgba(255,107,53,0.08); }

/* PLANNER ACTION BUTTONS */
.planner-action-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border-radius: 20px; font-family: 'Inter', sans-serif;
  font-size: 0.78rem; font-weight: 600; cursor: pointer; transition: 0.3s;
  background: rgba(0,212,255,0.08); border: 1px solid rgba(0,212,255,0.3); color: var(--neon-blue);
}
.planner-action-btn:hover { background: rgba(0,212,255,0.15); box-shadow: 0 0 12px rgba(0,212,255,0.2); }
.planner-action-danger { border-color: rgba(255,107,53,0.3); color: var(--neon-orange); background: rgba(255,107,53,0.08); }
.planner-action-danger:hover { background: rgba(255,107,53,0.15); box-shadow: 0 0 12px rgba(255,107,53,0.2); }

/* ═══ TICKET CARD ═══ */
.ticket-card {
  background: #0d0805; border: 2px solid var(--neon-orange);
  border-radius: 20px; overflow: hidden; max-width: 640px; margin: 0 auto;
  box-shadow: 0 0 40px rgba(255,107,53,0.2), 0 0 80px rgba(255,20,147,0.1);
}
.ticket-header {
  background: linear-gradient(135deg, #ff6b35 0%, #ff1493 50%, #00d4ff 100%);
  padding: 28px 32px 20px; text-align: center;
}
.ticket-logo {
  font-family: 'JetBrains Mono', monospace; font-size: 2.2rem; font-weight: 900;
  letter-spacing: 8px; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,0.2);
}
.ticket-tagline {
  font-family: 'Inter', sans-serif; font-size: 0.8rem; color: rgba(0,0,0,0.6);
  font-weight: 600; letter-spacing: 3px; text-transform: uppercase; margin-top: 4px;
}
.ticket-body { padding: 28px 32px; }
.ticket-event-name {
  font-family: 'JetBrains Mono', monospace; font-size: 1.5rem; font-weight: 900;
  color: var(--neon-orange); text-align: center; margin-bottom: 24px;
  text-shadow: 0 0 15px rgba(255,107,53,0.4);
}
.ticket-details-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; margin-bottom: 20px;
}
.ticket-detail { display: flex; flex-direction: column; gap: 2px; }
.ticket-detail-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--text-dim); }
.ticket-detail-value { font-family: 'JetBrains Mono', monospace; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.ticket-message {
  font-style: italic; font-size: 0.9rem; color: var(--text-secondary); text-align: center;
  padding: 12px 0; line-height: 1.5;
}
.ticket-divider {
  height: 1px; background: repeating-linear-gradient(90deg, var(--neon-orange) 0, var(--neon-orange) 8px, transparent 8px, transparent 16px);
  margin: 20px 0; opacity: 0.5;
}
.ticket-schedule-label {
  font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 700;
  color: var(--neon-pink); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px;
}
.ticket-sched-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.ticket-sched-row:last-child { border-bottom: none; }
.ticket-sched-time {
  font-family: 'JetBrains Mono', monospace; font-size: 0.82rem; font-weight: 700;
  color: var(--neon-blue); min-width: 80px;
}
.ticket-sched-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ticket-sched-name { font-weight: 600; font-size: 0.95rem; color: var(--text-primary); flex: 1; }
.ticket-sched-dur { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }
.ticket-footer {
  margin-top: 24px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-dim);
  letter-spacing: 1px;
}
.ticket-perforation {
  height: 16px;
  background: repeating-linear-gradient(90deg, transparent 0, transparent 8px, #0d0805 8px, #0d0805 10px, transparent 10px, transparent 18px),
              linear-gradient(180deg, rgba(255,107,53,0.3), transparent);
  background-size: 18px 100%, 100% 100%;
}

/* PLANNER RESPONSIVE */
@media (max-width: 768px) {
  .planner-summary-bar { gap: 20px; padding: 16px 20px; }
  .summary-num { font-size: 1.2rem; }
  .planner-game-row { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .game-row-schedule { flex-direction: row; gap: 8px; align-items: center; width: 100%; }
  .game-row-actions { width: 100%; justify-content: flex-end; }
  .ticket-card { margin: 0 8px; }
  .ticket-body { padding: 20px 16px; }
  .ticket-logo { font-size: 1.6rem; letter-spacing: 4px; }
  .ticket-details-grid { grid-template-columns: 1fr; gap: 10px; }
}

/* TOOLS GRID */
.tools-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; max-width: 1000px; margin: 0 auto; justify-items: center; }
.tool-card { width: 100%; max-width: 220px; background: var(--bg-card); border-radius: 16px; padding: 28px 16px; text-align: center; cursor: pointer; transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; }
.tool-card::before { content: ''; position: absolute; inset: -3px; border-radius: 19px; padding: 5px; background: linear-gradient(135deg, transparent 40%, var(--neon-green) 50%, transparent 60%); background-size: 200% 200%; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: borderRotate 3s linear infinite; opacity: 1; z-index: 0; }
/* Orange-accent tool cards (Timer, Scoreboard, Prompts, Cheatsheet, Pairings) */
.tool-card:has(.neon-orange)::before { background: linear-gradient(135deg, transparent 40%, var(--neon-orange) 50%, transparent 60%); background-size: 200% 200%; }
.tool-card:has(.neon-orange):hover::before { opacity: 1; background: linear-gradient(135deg, transparent 20%, var(--neon-orange) 50%, transparent 80%); }
.tool-card:has(.neon-orange):hover { transform: translateY(-8px); border-color: transparent; background: rgba(255,107,53,0.12); }
.tool-card:has(.neon-orange):hover .tool-icon svg { filter: drop-shadow(0 0 12px rgba(255,107,53,0.9)); }
/* Green-accent tool cards (Wheel, Dice, Giveaway, Teams, Tasks, Random) */
.tool-card:hover::before { opacity: 1; background: linear-gradient(135deg, transparent 20%, var(--neon-green) 50%, transparent 80%); }
.tool-card:hover { transform: translateY(-8px); border-color: transparent; background: rgba(57,255,20,0.12); }
.tool-icon { width: 50px; height: 50px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
.tool-icon svg { width: 38px; height: 38px; transition: filter 0.4s ease; }
.tool-card:hover .tool-icon svg { filter: drop-shadow(0 0 12px rgba(57,255,20,0.9)); }
.tool-card h3 { font-size: 0.88rem; font-weight: 700; margin-bottom: 6px; color: var(--text-primary); }
.tool-card p { font-size: 0.76rem; color: var(--text-secondary); line-height: 1.4; }

/* FOOTER & BUTTONS */
.footer { margin-top: 100px; padding: 60px 48px 40px; border-top: 1px solid rgba(255,107,53,0.1); }
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer-left a { font-family: 'JetBrains Mono', monospace; font-size: 1.3rem; font-weight: 800; letter-spacing: 3px; text-decoration: none; background: linear-gradient(90deg, var(--neon-orange), var(--neon-pink)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.footer-links { display: flex; gap: 28px; }
.footer-links a { color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease; }
.footer-links a:hover { color: var(--neon-orange); }
.footer-bottom { max-width: 1200px; margin: 36px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,107,53,0.08); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-bottom p { font-size: 0.8rem; color: var(--text-dim); }
.neon-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.85rem; letter-spacing: 0.5px; border-radius: 50px; cursor: pointer; transition: all 0.3s; text-decoration: none; border: 2px solid transparent; }
.neon-button-orange { background: var(--neon-orange); color: #000; box-shadow: 0 0 20px rgba(255,107,53,0.4); }
.neon-button-orange:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 0 35px rgba(255,107,53,0.6); }
.neon-button-blue { background: rgba(0, 212, 255, 0.05); color: var(--neon-blue); border-color: rgba(0,212,255,0.4); box-shadow: 0 0 15px rgba(0,212,255,0.15); }
.neon-button-blue:hover { background: var(--neon-blue); color: #000; border-color: var(--neon-blue); box-shadow: 0 0 30px rgba(0,212,255,0.4); }
.neon-button-green { background: rgba(57,255,20,0.05); color: var(--neon-green); border-color: rgba(57,255,20,0.4); box-shadow: 0 0 15px rgba(57,255,20,0.15); }
.neon-button-green:hover { background: var(--neon-green); color: #000; border-color: var(--neon-green); box-shadow: 0 0 30px rgba(57,255,20,0.4); }
#search-results { position: absolute; top: 100%; left: 0; width: 100%; z-index: 1000; border-radius: 12px; overflow: hidden; margin-top: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); border: 1px solid rgba(255,107,53,0.2); display: none; }
#search-results a { text-decoration: none; }
#search-results a:hover { background: rgba(255,107,53,0.1); }

/* MODAL (FROSTED GLASS) */
.modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(13,8,5,0.45); z-index: 2000; justify-content: center; align-items: center; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.modal-content { background: rgba(26,16,8,0.75); border: 1px solid rgba(255,255,255,0.15); border-radius: 20px; padding: 32px; max-width: 480px; width: 90%; text-align: center; backdrop-filter: blur(5px); box-shadow: 0 20px 50px rgba(0,0,0,0.5); position: relative; animation: slideUp 0.35s ease; }
@keyframes slideUp { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-secondary); font-size: 1.8rem; cursor: pointer; transition: 0.2s; }
.modal-close:hover { color: var(--neon-orange); }
.modal-stats { display: flex; gap: 15px; justify-content: center; margin: 16px 0; font-size: 0.9rem; color: var(--neon-blue); text-shadow: 0 0 8px rgba(0,212,255,0.4); }

/* RESPONSIVE */
@media (max-width: 768px) {
.header { padding: 14px 24px; } .logo { margin-left: 0; }
.nav { margin-right: 0; display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(13,8,5,0.97); flex-direction: column; justify-content: center; align-items: center; gap: 32px; backdrop-filter: blur(20px); }
.nav.active { display: flex; } .mobile-toggle { display: flex; }
.hero { padding: 90px 24px 60px; } .section { padding: 60px 24px; }
.paths-grid { gap: 20px; } .path-card { min-width: 160px; max-width: 200px; padding: 28px 18px; }
.tools-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } .tool-card { max-width: 100%; }
.footer { padding: 40px 24px 30px; } .footer-content { flex-direction: column; text-align: center; } .footer-bottom { flex-direction: column; text-align: center; }
.game-scroll-wrapper { max-height: 400px; }
.filter-wrapper { gap: 10px; } .filter-pill { padding: 8px 16px; font-size: 0.85rem; }
}
@media (max-width: 480px) {
.tools-grid { grid-template-columns: repeat(2, 1fr); max-width: 500px; }
.paths-grid { flex-direction: column; align-items: center; } .path-card { max-width: 260px; width: 100%; }