/* styles.css — MEMEMON site styles
   - Mobile-first
   - Dark mode default with light theme toggle
   - Neon Solana-inspired accents
   - Well-commented for maintainability
*/

:root{
  /* MEMEMON theme: deep dark base + neon + warm Pokemon-inspired accents */
  --bg:#050512;
  --panel:#0b0d14;
  --muted:#9aa0a6;
  --accent:#2fe6b8; /* mint */
  --accent-2:#8a6bff; /* violet */
  --accent-3:#ffd166; /* warm yellow */
  --accent-4:#ff6b6b; /* alert red */
  /* Rarity palette */
  --rarity-mythic: linear-gradient(90deg,#ffdd7e,#ffd365);
  --rarity-legendary: linear-gradient(90deg,#ffb47a,#ff9c4a);
  --rarity-epic: linear-gradient(90deg,#a58bff,#8a6bff);
  --rarity-rare: linear-gradient(90deg,#55e6aa,#3ddc84);
  --rarity-common: linear-gradient(90deg,#9aa0a6,#7f8790);
  --rarity-mythic-solid: #f6d365;
  --rarity-legendary-solid: #ff9c4a;
  --rarity-epic-solid: #8a6bff;
  --rarity-rare-solid: #3ddc84;
  --rarity-common-solid: #9aa0a6;
  --glass: rgba(255,255,255,0.03);
  --glass-2: rgba(255,255,255,0.02);
  --radius:14px;
  --max-width:1240px;
  --card-shadow: 0 12px 40px rgba(0,0,0,0.65);
  --neon-glow: 0 0 22px rgba(45,150,255,0.06), 0 0 48px rgba(138,107,255,0.04);
}

/* Light theme (overrides) */
:root.light{
  --bg:#f6f8fb;
  --panel:#ffffff;
  --muted:#55586a;
  --accent:#0ea5a0;
  --accent-2:#7c3aed;
  --glass: rgba(0,0,0,0.03);
}

*{box-sizing:border-box}
html,body{height:100%}
html{
  scroll-behavior:smooth;
  scroll-padding-top:100px;
}
body{
  margin:0;
  font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:linear-gradient(180deg,var(--bg),#05050a 120%);
  color:#e9eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
}

/* Utility container */
.container{
  width:94%;
  max-width:var(--max-width);
  margin:0 auto;
}

/* Header */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  backdrop-filter: blur(16px);
  background: linear-gradient(180deg, rgba(5,5,18,0.98), rgba(11,13,20,0.95));
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, var(--rarity-epic-solid), var(--rarity-legendary-solid), var(--accent)) 1;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 60px rgba(138,107,255,0.1);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0;
  gap: 20px;
}
.brand{
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 250ms ease;
}
.brand:hover{
  opacity: 0.85;
}
.brand .logo{
  font-family: 'Poppins', sans-serif;
  font-weight:800;
  letter-spacing:3px;
  font-size:1.5rem;
  background: linear-gradient(135deg, #ffdd7e, #ff9c4a, #8a6bff, #2fe6b8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 8px rgba(255,221,126,0.3)) drop-shadow(0 0 16px rgba(138,107,255,0.2));
  text-transform: uppercase;
}
.brand .tag{
  font-size:0.7rem;
  color:var(--rarity-legendary-solid);
  opacity: 0.8;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav-actions{
  display:flex;
  gap:6px;
  align-items:center;
}
.icon-btn{
  background: linear-gradient(135deg, rgba(138,107,255,0.1), rgba(47,230,184,0.05));
  border:2px solid rgba(138,107,255,0.2);
  color:var(--accent-2);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  transition: all 250ms ease;
  font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.icon-btn:hover{
  color:var(--accent-3);
  background: linear-gradient(135deg, rgba(255,221,126,0.15), rgba(255,156,74,0.1));
  border-color: var(--rarity-legendary-solid);
  transform:translateY(-3px) scale(1.05);
  box-shadow: 0 8px 20px rgba(255,156,74,0.3);
}

/* Main navigation - Card style */
.main-nav{position:relative}
.menu-toggle{
  background: linear-gradient(135deg, rgba(138,107,255,0.1), rgba(47,230,184,0.05));
  border:2px solid rgba(138,107,255,0.2);
  color:var(--accent-2);
  padding:10px 14px;
  border-radius:10px;
  cursor:pointer;
  font-size:1.1rem;
  transition: all 250ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.menu-toggle:hover{
  background: linear-gradient(135deg, rgba(255,221,126,0.15), rgba(255,156,74,0.1));
  border-color: var(--rarity-legendary-solid);
  color: var(--accent-3);
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(255,156,74,0.3);
}
.menu-list{
  position:absolute;
  right:0;
  top:56px;
  background: linear-gradient(180deg, rgba(11,13,20,0.98), rgba(5,5,18,0.98));
  border:3px solid transparent;
  border-image: linear-gradient(135deg, var(--rarity-epic-solid), var(--rarity-legendary-solid)) 1;
  padding:8px;
  border-radius:16px;
  list-style:none;
  margin:0;
  display:none;
  min-width:220px;
  box-shadow:0 16px 48px rgba(0,0,0,0.7), 0 0 40px rgba(138,107,255,0.2);
  backdrop-filter: blur(20px);
}
.menu-list.open{display:block}
.menu-list li{margin:3px 0}
.menu-list a{
  display:flex;
  align-items: center;
  padding:12px 16px;
  color:var(--muted);
  text-decoration:none;
  border-radius:10px;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 250ms ease;
  border: 2px solid transparent;
  position: relative;
  overflow: hidden;
}
.menu-list a.link-home{color:var(--rarity-mythic-solid)}
.menu-list a.link-card-week{color:var(--rarity-legendary-solid)}
.menu-list a.link-cards{color:var(--rarity-epic-solid)}
.menu-list a.link-roadmap{color:var(--rarity-rare-solid)}
.menu-list a.link-rarity{color:var(--accent-2)}
.menu-list a.link-game{color:var(--accent-3)}
.menu-list a::after{
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition: left 400ms ease;
}
.menu-list a:hover::after{
  left: 100%;
}
.menu-list a:hover{
  color:var(--text);
  transform: translateX(6px) scale(1.02);
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* Desktop nav: horizontal card-style menu */
@media(min-width:640px){
  .menu-toggle{display:none}
  .menu-list{
    position:static;
    display:flex;
    background:transparent;
    padding:0;
    box-shadow:none;
    min-width:auto;
    border: none;
    gap: 6px;
  }
  .menu-list li{margin: 0}
  .menu-list a{
    padding: 10px 18px;
    font-size: 0.9rem;
  }
  .menu-list a:hover{
    transform: translateY(-3px) scale(1.05);
  }
  .menu-list a::before{
    width: 6px;
    height: 6px;
    margin-right: 8px;
  }
  color: #181818;
}
.menu-list li:nth-child(2) a:hover,
.menu-list li:nth-child(2) a.active {
  background: var(--rarity-legendary);
  color: #181818;
}
.menu-list li:nth-child(3) a:hover,
.menu-list li:nth-child(3) a.active {
  background: var(--rarity-epic);
  color: #181818;
}
.menu-list li:nth-child(4) a:hover,
.menu-list li:nth-child(4) a.active {
  background: var(--rarity-rare);
  color: #181818;
}
.menu-list li:nth-child(5) a:hover,
.menu-list li:nth-child(5) a.active {
  background: var(--rarity-common);
  color: #181818;
}
.menu-list a.link-home:hover,
.menu-list a.link-home.active{background: var(--rarity-mythic); color:#181818}
.menu-list a.link-card-week:hover,
.menu-list a.link-card-week.active{background: var(--rarity-legendary); color:#181818}
.menu-list a.link-cards:hover,
.menu-list a.link-cards.active{background: var(--rarity-epic); color:#181818}
.menu-list a.link-roadmap:hover,
.menu-list a.link-roadmap.active{background: var(--rarity-rare); color:#181818}
.menu-list a.link-rarity:hover,
.menu-list a.link-rarity.active{background: var(--rarity-epic); color:#181818}
.menu-list a.link-game:hover,
.menu-list a.link-game.active{background: var(--rarity-legendary); color:#181818}

/* Colored rarity gems before each menu item */
.menu-list a::before{
  content:'';
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:12px;
  background:var(--muted);
  box-shadow:0 0 8px currentColor, 0 0 16px currentColor;
  transition: all 250ms ease;
}
.menu-list li:nth-child(1) a::before{background:var(--rarity-mythic-solid); box-shadow: 0 0 12px var(--rarity-mythic-solid)}
.menu-list li:nth-child(2) a::before{background:var(--rarity-legendary-solid); box-shadow: 0 0 12px var(--rarity-legendary-solid)}
.menu-list li:nth-child(3) a::before{background:var(--rarity-epic-solid); box-shadow: 0 0 12px var(--rarity-epic-solid)}
.menu-list li:nth-child(4) a::before{background:var(--rarity-rare-solid); box-shadow: 0 0 12px var(--rarity-rare-solid)}
.menu-list li:nth-child(5) a::before{background:var(--rarity-common-solid); box-shadow: 0 0 12px var(--rarity-common-solid)}
.menu-list a:hover::before{
  transform: scale(1.4);
  box-shadow: 0 0 20px currentColor, 0 0 32px currentColor;
}

/* Desktop nav: horizontal */
@media(min-width:640px){
  .menu-toggle{display:none}
  .menu-list{position:static;display:flex;background:transparent;padding:0;box-shadow:none;min-width:auto}
  .menu-list li{margin-left:18px}
  .menu-list a{padding:6px 0;color:var(--muted)}
  .menu-list a:hover{color:var(--accent);background:transparent}
}

/* Main content offset for fixed header */
main{
  padding-top:80px;
}

/* Hero */
.hero{padding:36px 0;text-align:center;background:linear-gradient(180deg, rgba(138,107,255,0.02), transparent);border-bottom:1px solid rgba(255,255,255,0.02)}
.hero h1{margin:0 0 16px 0;font-size:2.05rem;font-family:Poppins, sans-serif;color:#f3f7fb;text-shadow:0 2px 18px rgba(138,107,255,0.05)}
.ca-section{
  background:linear-gradient(135deg, rgba(138,107,255,0.08), rgba(47,230,184,0.04));
  border:2px solid rgba(138,107,255,0.25);
  border-radius:12px;
  padding:16px 24px;
  margin:0 auto 20px auto;
  max-width:600px;
}
.ca-label{
  font-size:1.1rem;
  font-weight:600;
  color:#f7fbff;
  margin:0 0 8px 0;
  font-family:monospace;
}
.ca-value{
  color:var(--accent-2);
  font-weight:700;
  background:rgba(138,107,255,0.15);
  padding:4px 12px;
  border-radius:6px;
  margin-left:8px;
  cursor:pointer;
  transition:all 250ms ease;
  display:inline-block;
}
.ca-value:hover{
  background:rgba(138,107,255,0.25);
  transform:scale(1.05);
}
.ca-copy-icon{
  color:var(--accent);
  font-size:0.9rem;
  margin-left:8px;
  opacity:0.7;
}
.ca-warning{
  font-size:0.9rem;
  color:var(--accent-3);
  margin:0;
  font-weight:600;
}
.hero .lead{color:var(--muted);max-width:760px;margin:12px auto;font-size:1rem}
.cta{display:inline-block;margin-top:12px;padding:12px 20px;border-radius:12px;background:linear-gradient(90deg,var(--accent-3),var(--accent-2));color:#081018;text-decoration:none;font-weight:700;box-shadow:0 10px 30px rgba(138,107,255,0.06)}

/* Card Week */
.card-week{margin:18px 0;padding:18px;background:linear-gradient(180deg, rgba(138,107,255,0.03), rgba(47,230,184,0.015));border-radius:14px;border:1px solid rgba(255,255,255,0.03);box-shadow:var(--card-shadow)}
.card-week {
  margin: 18px auto;
  padding: 18px;
  background: linear-gradient(180deg, rgba(138,107,255,0.03), rgba(47,230,184,0.015));
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.03);
  box-shadow: var(--card-shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-week .neon-frame {
  padding: 20px;
  border-radius: 18px;
  box-shadow: 0 0 60px rgba(138,107,255,0.06), inset 0 0 26px rgba(47,230,184,0.03);
  text-align: center;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.card-week .neon-frame h2 {
  margin: 0 0 20px 0;
  font-size: 1.5rem;
  color: var(--accent-3);
}
.card-week .highlight {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
}
.card-week img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  border: 6px solid rgba(255,255,255,0.02);
  box-shadow: var(--neon-glow);
  margin: 0 auto;
  display: block;
}
.card-week .details {
  text-align: center;
  margin: 0 auto;
}
@media(min-width:720px){
  .card-week .highlight {
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .card-week .details {
    text-align: center;
    margin: 0 auto;
  }
}

/* Filters */
.filters{padding:12px 0}
.filter-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filter-row label{font-size:0.85rem;color:var(--muted);display:flex;gap:8px;align-items:center}
.filter-row select{background:var(--panel);border:1px solid rgba(255,255,255,0.04);color:inherit;padding:8px;border-radius:8px}

/* Cards grid */
.cards-grid{display:grid;grid-template-columns:1fr;gap:16px;padding:16px 0}
.card{display:flex;flex-direction:column;gap:12px;align-items:stretch;padding:16px;background:linear-gradient(180deg,rgba(255,255,255,0.01),transparent);border-radius:12px;border:1px solid rgba(255,255,255,0.035);transition:all 280ms ease;box-shadow:var(--card-shadow);cursor:pointer}
.card:hover{background:linear-gradient(180deg,rgba(127,107,255,0.03),rgba(47,230,184,0.01));transform:translateY(-6px) scale(1.02);box-shadow:0 18px 48px rgba(10,14,20,0.6), 0 0 48px rgba(138,107,255,0.03)}
.card .thumb{position:relative;width:100%;height:220px;flex-shrink:0;border-radius:10px;overflow:hidden;background:linear-gradient(90deg,var(--accent-2),var(--accent));display:flex;align-items:center;justify-content:center}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 300ms ease;-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}
.card .thumb::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240' viewBox='0 0 240 240'><defs><style>@font-face{font-family:Poppins;src:local('Poppins')}</style></defs><text x='20' y='140' fill='rgba(255,255,255,0.15)' font-size='28' font-family='Poppins,Arial' transform='rotate(-30 120 120)'>MEMEMON</text></svg>");
  background-repeat:repeat;
  opacity:0.5;
}
.card:hover .thumb img{transform:scale(1.1)}
.card .meta{flex:1;display:flex;flex-direction:column;gap:8px}
.card .meta h3{margin:0;font-family:Poppins, sans-serif;font-weight:700;font-size:1rem;line-height:1.18;color:#f7fbff}
.card .meta p{margin:0;color:var(--muted);font-size:0.92rem;line-height:1.34}
.card .badge{display:inline-block;padding:6px 10px;border-radius:10px;font-size:0.78rem;font-weight:800;width:fit-content;text-transform:uppercase;letter-spacing:0.6px}
.card .actions{display:flex;gap:8px;flex-wrap:wrap}
.btn{padding:8px 12px;border-radius:10px;border:0;background:linear-gradient(90deg,var(--accent-3),var(--accent-2));color:#081018;cursor:pointer;font-size:0.9rem;white-space:nowrap;flex:1;min-width:90px;font-weight:700}
.btn:hover{filter:brightness(1.04);transform:translateY(-2px)}
.btn.secondary{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.04);flex:none}

/* Roadmap */
.roadmap{padding:36px 0}
.roadmap h2{
  font-size:1.8rem;
  margin:0 0 12px 0;
  font-family:Poppins, sans-serif;
  color:#f7fbff;
  text-align:center;
}
.roadmap-intro{
  text-align:center;
  color:var(--muted);
  font-size:1.05rem;
  margin-bottom:32px;
}
.roadmap-timeline{
  display:flex;
  flex-direction:column;
  gap:32px;
}
.roadmap-phase{
  background:linear-gradient(180deg, rgba(138,107,255,0.05), rgba(47,230,184,0.02));
  border-radius:16px;
  padding:28px;
  border-left:6px solid var(--accent-2);
  transition:all 300ms ease;
}
.roadmap-phase:hover{
  background:linear-gradient(180deg, rgba(138,107,255,0.08), rgba(47,230,184,0.04));
  transform:translateX(8px);
  box-shadow:0 12px 40px rgba(138,107,255,0.15);
}
.phase-header{
  margin-bottom:20px;
}
.phase-number{
  display:inline-block;
  background:var(--rarity-epic);
  padding:6px 14px;
  border-radius:8px;
  font-size:0.8rem;
  font-weight:800;
  letter-spacing:1px;
  color:#0b0d14;
  margin-bottom:8px;
}
.roadmap-phase h3{
  font-family:Poppins, sans-serif;
  font-size:1.5rem;
  margin:8px 0 4px 0;
  color:var(--accent-3);
}
.phase-subtitle{
  font-style:italic;
  color:var(--muted);
  margin:0;
  font-size:0.95rem;
}
.phase-items{
  list-style:none;
  padding:0;
  margin:16px 0 0 0;
}
.phase-items > li{
  padding:10px 0;
  padding-left:24px;
  position:relative;
  color:#e9eef6;
  line-height:1.6;
}
.phase-items > li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent);
  font-weight:700;
  font-size:1.1rem;
}
.phase-items ul{
  margin:8px 0 0 0;
  padding-left:24px;
  list-style:disc;
  color:var(--muted);
}
.phase-items ul li{
  padding:4px 0;
}
@media(min-width:900px){
  .roadmap-timeline{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:24px;
  }
  .roadmap-phase{
    padding:32px;
  }
}

/* Rarity bars */
.rarity{padding:18px 0}
.rarity h2{font-size:1.2rem;margin:0 0 10px 0;color:var(--accent-3)}
.rarity-bars{display:flex;flex-direction:column;gap:8px}
.bar{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:10px;background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)}
.bar .label{font-weight:800}
.bar.mythic{border-left:6px solid #f6d365}
.bar.legendary{border-left:6px solid #ff9c4a}
.bar.epic{border-left:6px solid var(--accent-2)}
.bar.rare{border-left:6px solid #3ddc84}
.bar.common{border-left:6px solid #9aa0a6}

/* Footer */
.site-footer{padding:18px 0;margin-top:36px;border-top:1px solid rgba(255,255,255,0.03)}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer-inner .socials a{color:var(--muted);margin-left:10px}

/* Back to top */
.back-to-top{position:fixed;right:18px;bottom:18px;background:linear-gradient(90deg,var(--accent),var(--accent-2));border:0;color:#021;padding:12px;border-radius:50%;box-shadow:0 8px 30px rgba(125,249,255,0.06);display:none;z-index:60}
.back-to-top.show{display:block}

/* Reveal animations */
.reveal{opacity:0;transform:translateY(16px);transition:all 700ms cubic-bezier(.2,.9,.2,1)}
.revealed{opacity:1;transform:none}
.reveal-up{opacity:0;transform:translateY(12px);transition:all 700ms cubic-bezier(.2,.9,.2,1)}
.revealed-up{opacity:1;transform:none}

/* Rarity modal */
.rarity-modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.95);
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(12px);
  overflow-y:auto;
  padding:20px;
}
.rarity-modal.active{display:flex}
.rarity-modal-content{
  background:linear-gradient(180deg, rgba(11,13,20,0.98), rgba(5,5,18,0.98));
  border:3px solid transparent;
  border-image:linear-gradient(135deg, var(--rarity-epic-solid), var(--rarity-legendary-solid), var(--accent)) 1;
  border-radius:20px;
  padding:40px;
  max-width:900px;
  width:100%;
  position:relative;
  animation:zoomIn 300ms ease;
  box-shadow:0 24px 80px rgba(0,0,0,0.8), 0 0 100px rgba(138,107,255,0.3);
  margin:auto;
}
.rarity-modal-close{
  position:absolute;
  top:15px;
  right:15px;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:32px;
  padding:8px 18px;
  border-radius:10px;
  cursor:pointer;
  transition:all 250ms ease;
  line-height:1;
}
.rarity-modal-close:hover{
  background:var(--rarity-legendary);
  color:#0b0d14;
  border-color:var(--rarity-legendary-solid);
  transform:scale(1.1);
}
.rarity-modal-body{
  color:#e9eef6;
  line-height:1.7;
}
.rarity-modal-body h1{
  font-family:Poppins, sans-serif;
  font-size:2rem;
  margin:0 0 20px 0;
  background:linear-gradient(135deg, #ffdd7e, #ff9c4a, #8a6bff, #2fe6b8);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  text-align:center;
}
.rarity-modal-body .intro{
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:15px;
  text-align:center;
}
.rarity-modal-body .tier{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent);
  border-radius:14px;
  padding:24px;
  margin:24px 0;
  border-left:5px solid;
}
.rarity-modal-body .tier.mythic{border-left-color:var(--rarity-mythic-solid)}
.rarity-modal-body .tier.legendary{border-left-color:var(--rarity-legendary-solid)}
.rarity-modal-body .tier.epic{border-left-color:var(--rarity-epic-solid)}
.rarity-modal-body .tier.rare{border-left-color:var(--rarity-rare-solid)}
.rarity-modal-body .tier.common{border-left-color:var(--rarity-common-solid)}
.rarity-modal-body .tier h2{
  font-family:Poppins, sans-serif;
  font-size:1.5rem;
  margin:0 0 8px 0;
  color:#f7fbff;
}
.rarity-modal-body .tier .tagline{
  font-style:italic;
  color:var(--accent-3);
  margin:0 0 12px 0;
  font-size:1.05rem;
}
.rarity-modal-body .tier h3{
  font-size:1.1rem;
  margin:18px 0 8px 0;
  color:var(--accent);
}
.rarity-modal-body .tier ul{
  margin:8px 0;
  padding-left:20px;
}
.rarity-modal-body .tier ul li{
  margin:6px 0;
  color:var(--muted);
}
.rarity-modal-body .tier p{
  margin:8px 0;
  color:#e9eef6;
}
.rarity-modal-body .tier .footer-note{
  font-style:italic;
  color:var(--accent-2);
  margin-top:12px;
  font-weight:600;
}
.rarity-modal-body .determination,
.rarity-modal-body .why-hybrid{
  background:linear-gradient(180deg, rgba(138,107,255,0.05), rgba(47,230,184,0.02));
  border-radius:14px;
  padding:24px;
  margin:24px 0;
  border:2px solid rgba(138,107,255,0.2);
}
.rarity-modal-body .determination h2,
.rarity-modal-body .why-hybrid h2{
  font-family:Poppins, sans-serif;
  font-size:1.4rem;
  margin:0 0 16px 0;
  color:var(--accent-3);
}
.rarity-modal-body .determination ol{
  margin:12px 0;
  padding-left:24px;
}
.rarity-modal-body .determination ol li{
  margin:12px 0;
  color:#e9eef6;
}
.rarity-modal-body .why-hybrid ul{
  margin:12px 0;
  padding-left:20px;
}
.rarity-modal-body .why-hybrid ul li{
  margin:8px 0;
  color:#e9eef6;
  font-size:1.05rem;
}
@media(max-width:640px){
  .rarity-modal-content{
    padding:24px;
  }
  .rarity-modal-body h1{
    font-size:1.5rem;
  }
  .rarity-modal-body .tier h2{
    font-size:1.2rem;
  }
}

/* Card enlargement modal */
.card-modal{
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.9);
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(8px);
}
.card-modal.active{display:flex}
.card-modal-content{
  max-width:90%;
  max-height:90vh;
  position:relative;
  animation:zoomIn 300ms ease;
}
.card-modal-content img{
  width:100%;
  height:auto;
  max-height:90vh;
  object-fit:contain;
  border-radius:16px;
  box-shadow:0 24px 80px rgba(0,0,0,0.8), 0 0 100px rgba(138,107,255,0.3);
  border:3px solid transparent;
  border-image:linear-gradient(135deg, var(--rarity-epic-solid), var(--rarity-legendary-solid), var(--accent)) 1;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
  user-select:none;
}
.card-modal-content::after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'><defs><style>@font-face{font-family:Poppins;src:local('Poppins')}</style></defs><text x='40' y='180' fill='rgba(255,255,255,0.2)' font-size='36' font-family='Poppins,Arial' font-weight='700' transform='rotate(-35 150 150)'>MEMEMON</text></svg>");
  background-repeat:repeat;
  opacity:0.6;
  border-radius:16px;
}
.card-modal-close{
  position:absolute;
  top:-40px;
  right:0;
  background:rgba(255,255,255,0.1);
  border:2px solid rgba(255,255,255,0.2);
  color:#fff;
  font-size:28px;
  padding:8px 16px;
  border-radius:8px;
  cursor:pointer;
  transition:all 250ms ease;
}
.card-modal-close:hover{
  background:var(--rarity-legendary);
  color:#0b0d14;
  border-color:var(--rarity-legendary-solid);
  transform:scale(1.1);
}
@keyframes zoomIn{
  from{transform:scale(0.8);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* Responsive layout */
@media(min-width:640px){
  .cards-grid{grid-template-columns:repeat(2,1fr)}
  .card .thumb{height:260px}
}
@media(min-width:900px){
  .cards-grid{grid-template-columns:repeat(3,1fr);gap:20px}
  .hero{padding:40px 0}
  .card{padding:18px}
  .card .thumb{height:320px}
}
@media(min-width:1200px){
  .card .thumb{height:360px}
}

/* Small accessible tweaks */
a{color:inherit}
button:focus,select:focus{outline:2px solid rgba(125,249,255,0.12);outline-offset:2px}

/* End of styles.css */