:root{
  --bg: #0e0e14;
  --card: rgba(200,160,255,0.06);
  --accent: #c895ff;
  --muted: #bdbdd4cc;
  --glass: rgba(255,255,255,0.03);
           
    --glow: 0 0 12px rgba(91, 61, 245, 0.7);

}

*{box-sizing:border-box
;
scrollbar-width: none;}
html,body{margin:0;font-family:Montserrat,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;}
body{
  scrollbar-width: none;
  width: 100vw;
  background:black;
  color:#e9e7ff;
  padding:28px;
  -webkit-font-smoothing:antialiased;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
}
.spot{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap:8px;
  margin: 18px;

}
   .pokemon {
            height: 100px;
            width: auto;

        }
  /* Sticky Header */
        .header {
           
          
            background: linear-gradient(135deg, rgb(55, 47, 128), #574134);
           text-align: center;
            padding: 8px;
            border-radius: 0 0 20px 20px;
            box-shadow: var(--glow);
           
            display: flex;
            flex-direction: row;
            justify-content: center;
            color: rgb(124, 126, 31);
        }

        .header h1 {
            margin-bottom: 10px;
            padding: 0;
           

            letter-spacing: 2px;
            font-family: monospace;
        }



/* grid / pinterest */
.container{max-width:1100px;margin:0 auto;padding:0 8px;}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:18px;
  align-items:start;
}

/* card */
.card{

  background:var(--card);
  border:1px solid rgba(200,160,255,0.12);
  border-radius:14px;
  padding:8px;

  transition:transform .22s ease, box-shadow .22s;
  box-shadow:0 8px 30px rgba(0,0,0,0.5);
  cursor:pointer;
  text-decoration: none;
}
.card:hover{transform:translateY(-6px); box: shadow 10px; 18px 40px rgba(87, 189, 207, 0.644);}

.card .top{display:flex;gap:12px;align-items:center}
.avatar{
  width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid rgba(255,255,255,0.06);
  background:var(--glass);
}
.card h3{margin:0;font-size:1.05rem;color: #c9ca66; font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif}
.meta{font-size:0.78rem;color:var(--muted);margin-top:4px}

/* bio */
.bio{margin-top:10px;color:#afaef1fa;font-weight:100;font-size:0.95rem}

/* tier badge */
.badge{
  display:inline-block;padding:6px 8px;border-radius:999px;font-weight:700;font-size:0.72rem;
  background:linear-gradient(90deg, rgba(200,160,255,0.12), rgba(200,160,255,0.04));
  color:var(--accent);border:1px solid rgba(200,160,255,0.08);
  margin-top:8px;
}

/* footer opt-out note */
.note{
  margin-top:28px;color:var(--muted);font-size:0.9rem;text-align:center;
}

/* person page */
.person-wrap{max-width:900px;margin:20px auto;padding:20px;}
.person-card{
  display:flex;gap:22px;align-items:flex-start;background:var(--card);
  border-radius:14px;padding:22px;border:1px solid rgba(200,160,255,0.08);
}
.person-card .big-avatar{width:160px;height:160px;border-radius:14px;object-fit:cover}
.person-card .info h1{margin:0;font-size:1.6rem;color:var(--accent)}
.person-card .info p{color:#dddbe8cc;margin-top:10px;font-weight:300}

/* responsive mobile: switch to column layout */
@media (max-width:720px){
 .card{  min-width: 300px;
  max-width: 350px;}
  .grid{display:flex;flex-direction:column;gap:12px}
  .header{flex-direction:row;align-items:flex-start}
  .person-card{flex-direction:column;align-items:center;text-align:center}
  .person-card .info{width:100%}
  .person-card .big-avatar{width:120px;height:120px}
  .card{max-width: 400px;}
}