:root{
  --bg:#0b1220;           /* page background */
  --card:#121a2b;         /* cards */
  --card-2:#0f1628;       /* alt card */
  --text:#e7eefb;         /* primary text */
  --text-dim:#9fb3d1;     /* secondary text */
  --accent:#70b6ff;       /* chips, icons */
  --ok:#45e27d;           /* thumbs % */
  --chip:#19243d;         /* chip background */
  --hover:#1b2741;        /* hover surface */
  --shadow: 0 10px 20px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.35);
  --radius:14px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font: 15px/1.45 Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
a{color:inherit}
.wrap{max-width:1400px; margin:24px auto; padding:0 16px 80px}

/* Header */
.profile{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)) , var(--card);
  border-radius:var(--radius); padding:22px; display:grid;
  grid-template-columns:auto 1fr auto; gap:18px; align-items:center; box-shadow:var(--shadow)
}
.avatar{
  width:64px; height:64px; border-radius:50%; position:relative; overflow:hidden;
  background:radial-gradient(circle at 30% 30%, #6576ff, #1e2a55)
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.title{font-weight:700; font-size:22px}
.badges{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}
.chip{display:inline-flex; align-items:center; gap:8px; background:var(--chip); color:var(--text); padding:8px 12px; border-radius:999px; font-weight:600}
.chip svg{width:16px; height:16px; opacity:.8}
.actions{display:flex; gap:10px; align-items:center}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px;
  background:#1a2744; border:1px solid #223355; border-radius:10px; cursor:pointer;
  transition:background .2s, transform .04s
}
.btn:hover{background:#21345a}
.btn:active{transform:translateY(1px)}
.socials{display:flex; gap:10px}
.icon-btn{width:36px; height:36px; border-radius:10px; display:grid; place-items:center; background:#1a2744; border:1px solid #223355; cursor:pointer}

/* Sections */
h2{margin:26px 4px 14px; font-size:22px}

/* Game Lists */
.game-list{display:grid; gap:14px}
.game-list{grid-template-columns:repeat(1, 1fr)}
@media (min-width:920px){
  .game-list{grid-template-columns:repeat(2, 1fr)}
}
@media (min-width:1180px){
  .game-list{grid-template-columns:repeat(3, 1fr)}
}

.game-card{
  position:relative; border-radius:16px; background:var(--card-2); box-shadow:var(--shadow);
  padding:14px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease; overflow:hidden
}
.game-card:hover{transform:scale(1.03); box-shadow:0 18px 40px rgba(0,0,0,.55), 0 6px 20px rgba(0,0,0,.45); background:var(--hover)}
.thumb{width:64px; height:64px; border-radius:12px; background:linear-gradient(135deg, #7efacc, #2b8cff); position:relative; overflow:hidden}
.thumb img{width:100%; height:100%; object-fit:cover; display:block}
.thumb.small{width:60px; height:60px}
.thumb em{position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-size:28px; filter:drop-shadow(0 2px 8px rgba(0,0,0,.7))}

.info{min-width:0}
.game-title{
  font-weight:700; font-size:16px; color:var(--text); display:block; margin-bottom:6px;
  overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:1; line-clamp:1
}
/* Reveal more text on hover */
.game-card:hover .game-title{ -webkit-line-clamp:3; line-clamp:3 }

.meta{display:flex; gap:14px; flex-wrap:wrap; color:var(--text-dim); font-weight:600}
.meta span{display:inline-flex; align-items:center; gap:6px}
.meta svg{width:16px; height:16px; opacity:.85}
.ok{color:var(--ok)}

.right{display:grid; justify-items:end; align-items:center; gap:6px}
.players{display:inline-flex; align-items:center; gap:8px; background:var(--chip); padding:8px 10px; border-radius:10px; font-weight:700}
.players svg{width:16px; height:16px; opacity:.9}

/* Utility icon size */
.svg{width:18px; height:18px}

/* external link buttons on the right of each card */
.ext-links{ display:flex; gap:6px; align-items:center }
.ext-btn{
  width:20px; height:20px;                 /* same as old shield */
  border-radius:6px;
  display:grid; place-items:center;
  background:var(--chip);
  border:1px solid #223355;
  opacity:.9; cursor:pointer;
  transition:opacity .2s, transform .04s, background .2s;
}
.ext-btn:hover{ opacity:1; background:var(--hover) }
.ext-btn:active{ transform:translateY(1px) }
.ext-btn img, .ext-btn svg{ width:14px; height:14px; display:block }  /* icon inside */
.game-card { cursor: pointer; }
.game-card .ext-links .ext-btn { cursor: pointer; }