/* ByteWiseApps Games — Channel Guide */
:root {
  --bg: #0b0d14;
  --bg-2: #12151f;
  --ink: #f4f6fb;
  --muted: #9aa3b5;
  --cyan: #3ee8ff;
  --magenta: #e11d8f;
  --line: rgba(255,255,255,.08);
  --radius: 20px;
  --focus: 0 0 0 4px #0b0d14, 0 0 0 8px var(--cyan);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--ink); overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Manrope", system-ui, sans-serif;
  padding: calc(20px + var(--safe-t)) calc(24px + var(--safe-r)) calc(28px + var(--safe-b)) calc(24px + var(--safe-l));
  background:
    radial-gradient(900px 500px at 8% -10%, rgba(225,29,143,.18), transparent 50%),
    radial-gradient(800px 480px at 100% 0%, rgba(62,232,255,.12), transparent 46%),
    radial-gradient(700px 500px at 80% 110%, rgba(241,196,15,.08), transparent 50%),
    var(--bg);
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--focus); }
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

.top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 36px;
}
.brand { display: flex; align-items: center; gap: 12px; min-height: 48px; }
.mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--magenta);
  display: grid; place-items: center; flex: 0 0 auto;
}
.mark svg { width: 16px; height: 16px; }
.wordmark { font-weight: 800; font-size: 1.15rem; letter-spacing: -.02em; }
.wordmark span { font-weight: 600; opacity: .72; }
.tools { display: flex; gap: 10px; align-items: center; }
.search, .pill {
  min-height: 48px; border-radius: 999px; border: 1px solid var(--line);
  background: rgba(18,21,31,.8); padding: 0 18px; display: inline-flex; align-items: center; gap: 8px;
}
.search { min-width: 220px; }
.search input {
  background: transparent; border: 0; width: 100%; min-height: 48px;
}
.search input::placeholder { color: var(--muted); }
.pill { cursor: pointer; }
.pill:hover { border-color: rgba(62,232,255,.4); }

h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: 0 0 8px; letter-spacing: -.04em; font-weight: 800; }
.lede { color: var(--muted); margin: 0 0 28px; font-size: 1.05rem; }

.channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 48px;
}
.channel {
  position: relative; display: block; border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 3 / 4.2; min-height: 0; width: 100%;
  transform: translateZ(0);
  outline: 1px solid rgba(255,255,255,.06);
}
.channel.is-focused, .channel:focus-visible {
  box-shadow: var(--focus);
  transform: scale(1.03);
  z-index: 2;
}
.channel .art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.channel .shade {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(0,0,0,.78) 100%);
}
.channel .meta {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
}
.channel .kicker { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.78); font-weight: 700; }
.channel h2 { margin: 4px 0 0; font-size: 1.45rem; letter-spacing: -.03em; }
.channel .count { color: rgba(255,255,255,.65); font-size: .85rem; margin-top: 4px; }

.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 14px;
}
.section-h h2 { margin: 0; font-size: 1.4rem; }
.empty {
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 16px; padding: 28px; color: var(--muted);
  background: rgba(255,255,255,.02);
}

footer {
  margin-top: 56px; color: var(--muted); font-size: .88rem;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
footer a:hover { color: var(--ink); }

.page-head { margin-bottom: 28px; }
.back { color: var(--muted); display: inline-flex; min-height: 48px; align-items: center; }
.grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.coming {
  border: 1px dashed rgba(255,255,255,.16); border-radius: 16px; padding: 32px;
  color: var(--muted); min-height: 180px; display: grid; place-items: center; text-align: center;
}
.accent-casual { --accent: #ffb38a; }
.accent-puzzle { --accent: #8b7cff; }
.accent-arcade { --accent: #3ee8ff; }
.accent-driving { --accent: #ffb020; }
.accent-action { --accent: #ff4b5c; }
.page-head h1 { border-left: 6px solid var(--accent, var(--cyan)); padding-left: 14px; }

.tabs {
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  margin: 0;
  background: rgba(11,13,20,.92); backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  padding: 8px 12px calc(8px + var(--safe-b));
  grid-template-columns: 1fr 1fr 1fr; gap: 8px;
}
.tabs a {
  min-height: 48px; display: grid; place-items: center; border-radius: 12px; color: var(--muted); font-weight: 700; font-size: .85rem;
}
.tabs a[aria-current="page"] { color: var(--magenta); }


.channel[data-slug="action"] { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (max-width: 1099px) {
  .search { display: none; }
  .tabs { display: grid; }
  body { padding-bottom: calc(96px + var(--safe-b)); }
  .channel.is-focused, .channel:focus-visible { transform: none; }
}
@media (min-width: 1100px) {
  .channels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
  .channel[data-slug="action"] { grid-column: auto; aspect-ratio: 3 / 4.2; }
}
@media (max-width: 560px) {
  .wordmark { font-size: 1rem; }
  .pill { padding: 0 14px; }
  .channel h2 { font-size: 1.15rem; }
}
@media (min-width: 1400px) {
  body { padding: 36px 48px 40px; }
  h1 { font-size: 3.6rem; }
}
.game-card{display:block;border-radius:16px;overflow:hidden;background:rgba(255,255,255,.04);outline:1px solid rgba(255,255,255,.08)}
.game-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.game-card div{padding:14px 16px}
.game-card p{margin:6px 0 0;color:var(--muted)}
.featured{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;margin:0 0 32px;padding:12px;border-radius:20px;background:rgba(255,255,255,.05);outline:1px solid rgba(255,255,255,.1);min-height:88px}
.featured img{width:120px;height:88px;object-fit:cover;border-radius:14px}
.featured .kicker{font-size:.72rem;letter-spacing:.16em;font-weight:700;color:#3ee8ff}
.featured strong{display:block;font-size:1.35rem;margin:4px 0}
.featured p{margin:0 0 10px;color:var(--muted)}
.featured .go{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;background:#e11d8f;font-weight:800}
@media (max-width:560px){.featured{grid-template-columns:1fr}.featured img{width:100%;height:140px}}

.continue-list{display:flex;flex-direction:column;gap:12px}
.continue-list .featured{margin:0}