/* =========================================================================
   MOJE GRY — style biblioteki
   Motyw ciemny, w klimacie gier (paleta i fonty jak w KORYTARZE / Arenie).
   ========================================================================= */
:root{
  --bg:#16131f; --bg2:#1e1a2b; --panel:#241f34; --line:#37304d;
  --text:#ece7f5; --muted:#9a92ad;
  --ember:#e8663f; --arcane:#a678ff; --gold:#f0c33a; --green:#6fce9b;
  --radius:16px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:"Oswald", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.5;
}
a{ color:inherit; text-decoration:none; }
.wrap{ width:100%; max-width:1120px; margin:0 auto; padding:0 22px; }
.mono{ font-family:"Space Mono", monospace; }

/* ---------------- pasek górny ---------------- */
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; background:rgba(18,15,26,.72); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.logo{ font-weight:700; letter-spacing:.22em; font-size:16px; text-transform:uppercase; }
.logo span{ color:var(--ember); }
.nav{ display:flex; gap:22px; font-family:"Space Mono",monospace; font-size:13px; }
.nav a{ color:var(--muted); transition:color .15s; }
.nav a:hover{ color:var(--text); }

/* ---------------- hero ---------------- */
.hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--line); }
.hero__glow{
  position:absolute; inset:-40% 0 auto 0; height:120%;
  background:radial-gradient(700px 380px at 30% 0%, rgba(232,102,63,.25), transparent 60%),
             radial-gradient(680px 360px at 80% 10%, rgba(166,120,255,.22), transparent 60%);
  animation:drift 14s ease-in-out infinite alternate;
}
@keyframes drift{ from{ transform:translateX(-30px); } to{ transform:translateX(30px); } }
.hero__inner{ position:relative; max-width:1120px; margin:0 auto; padding:74px 22px 60px; }
.hero__kicker{
  font-family:"Space Mono",monospace; font-size:12px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--ember); margin-bottom:16px;
}
.hero__title{
  font-size:clamp(40px, 7vw, 76px); font-weight:700; line-height:1.02;
  text-transform:uppercase; letter-spacing:.01em;
}
.hero__title span{
  background:linear-gradient(180deg,#ffb08a,var(--ember));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub{ max-width:560px; margin-top:18px; color:var(--muted); font-size:18px; }
.hero__stats{ display:flex; gap:38px; margin-top:34px; flex-wrap:wrap; }
.hero__stats b{ display:block; font-size:34px; font-weight:700; color:var(--gold); line-height:1; }
.hero__stats span{ font-family:"Space Mono",monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted); }

/* ---------------- nagłówek sekcji + filtry ---------------- */
.section-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:44px 0 20px;
}
.section-head h2{ font-size:24px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; }
.about h2{ font-size:24px; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:14px; }
.filters{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  cursor:pointer; font-family:"Space Mono",monospace; font-size:12px;
  color:var(--muted); background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:8px 16px; transition:.14s;
}
.chip:hover{ color:var(--text); border-color:#4a4066; }
.chip.is-active{ color:#231007; background:var(--ember); border-color:var(--ember); font-weight:700; }

/* ---------------- siatka gier ---------------- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:18px; padding-bottom:10px; }
.card{
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(180deg,var(--panel),var(--bg2));
  border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .16s, border-color .16s, box-shadow .16s;
}
.card:hover{ transform:translateY(-4px); border-color:#4a4066; box-shadow:0 14px 34px rgba(0,0,0,.4); }

.thumb{
  position:relative; height:150px; display:flex; align-items:center; justify-content:center;
  border-bottom:1px solid var(--line); overflow:hidden;
}
.thumb .crest{ font-size:62px; line-height:1; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); z-index:1; }
.thumb::before{ content:""; position:absolute; inset:0; opacity:.9; }
.thumb--ember::before{ background:radial-gradient(360px 200px at 50% 120%, rgba(232,102,63,.5), transparent 70%); }
.thumb--arcane::before{ background:radial-gradient(360px 200px at 50% 120%, rgba(166,120,255,.5), transparent 70%); }
.thumb--gold::before{ background:radial-gradient(360px 200px at 50% 120%, rgba(240,195,58,.42), transparent 70%); }
.thumb--green::before{ background:radial-gradient(360px 200px at 50% 120%, rgba(111,206,155,.42), transparent 70%); }
.thumb .genre{
  position:absolute; left:12px; top:12px; z-index:1;
  font-family:"Space Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text); background:rgba(12,10,18,.6); border:1px solid var(--line);
  border-radius:6px; padding:4px 9px;
}

.card__body{ padding:15px 16px 6px; flex:1; }
.card__body h3{ font-size:20px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; }
.card__body p{ color:var(--muted); font-size:14.5px; margin-top:7px; }
.card__tags{ margin-top:11px; display:flex; gap:6px; flex-wrap:wrap; }
.tag{ font-family:"Space Mono",monospace; font-size:10.5px; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:3px 8px; }

.card__actions{ display:flex; gap:9px; padding:14px 16px 16px; }
.btn{
  flex:1; text-align:center; cursor:pointer; font-family:"Oswald",sans-serif;
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.04em;
  border-radius:10px; padding:11px 12px; transition:.14s; border:1px solid transparent;
}
.btn--play{ background:var(--ember); color:#231007; }
.btn--play:hover{ filter:brightness(1.08); }
.btn--online{ background:var(--arcane); color:#1a0d2e; }
.btn--online:hover{ filter:brightness(1.08); }
.btn--ghost{ background:transparent; color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.btn--disabled{ background:var(--panel); color:var(--muted); cursor:not-allowed; border-color:var(--line); }
.btn--disabled:hover{ filter:none; }

.empty{ text-align:center; color:var(--muted); font-family:"Space Mono",monospace; padding:40px 0; }

/* ---------------- o mnie ---------------- */
.about{ margin-top:56px; border-top:1px solid var(--line); background:var(--bg2); }
.about__inner{ padding:48px 22px; max-width:820px; }
.about p{ color:var(--muted); font-size:16px; margin-top:10px; }
.about__hint{ font-family:"Space Mono",monospace; font-size:12px; color:#6a6480; margin-top:18px; }
.about code{ color:var(--gold); }

/* ---------------- stopka ---------------- */
.footer{ border-top:1px solid var(--line); }
.footer__inner{ display:flex; justify-content:space-between; align-items:center;
  padding:22px; font-family:"Space Mono",monospace; font-size:12px; color:var(--muted); }
.footer__made{ color:#6a6480; }

/* ---------------- telefony ---------------- */
@media (max-width:560px){
  .nav{ display:none; }
  .hero__inner{ padding:54px 22px 44px; }
  .hero__stats{ gap:26px; }
  .card__actions{ flex-direction:column; }
}