/* Lomé Arcade — layout: header bar, centred game stage (max 560px), content column below.
   Single deliberate dark "night market" look, kente-inspired accents. */
:root{
  --bg:#15123a;        /* nuit indigo */
  --surface:#211d52;
  --surface-2:#2b2666;
  --line:#3d3784;
  --fg:#f6f0e4;
  --muted:#b6afd9;
  --gold:#f5b82e;      /* or kente */
  --coral:#ff6b4a;
  --green:#2fbf71;
  --sky:#4cc3ff;
  --font-display:"Bungee", "Impact", "Arial Black", sans-serif;
  --font-body:"Nunito Sans", "Segoe UI", Roboto, Arial, sans-serif;
  --r:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);
  background-image:
    radial-gradient(circle at 15% -10%, rgba(245,184,46,.10), transparent 40%),
    radial-gradient(circle at 110% 20%, rgba(76,195,255,.08), transparent 35%);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:16px; line-height:1.55;
  padding-inline:16px;
  min-height:100vh;
}
a{color:var(--gold)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px}
.wrap{max-width:1080px; margin-inline:auto}

/* ---------- header ---------- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-block:14px; max-width:1080px; margin-inline:auto; flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--fg)}
.logo-mark{
  width:38px; height:38px; border-radius:10px; flex:none;
  background:
    linear-gradient(90deg, var(--gold) 0 25%, var(--green) 25% 50%, var(--coral) 50% 75%, var(--sky) 75%);
  display:grid; place-items:center; font-family:var(--font-display); color:var(--bg); font-size:18px;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25);
}
.logo-text{font-family:var(--font-display); font-size:20px; letter-spacing:.02em}
.logo-text span{color:var(--gold)}
.nav{display:flex; gap:6px; flex-wrap:wrap}
.nav a, .btn{
  font-family:var(--font-body); font-weight:800; font-size:14px;
  color:var(--fg); text-decoration:none; border:2px solid var(--line);
  background:var(--surface); padding:8px 14px; border-radius:999px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; line-height:1.2;
  transition:transform .12s, background .12s, border-color .12s;
}
.nav a:hover, .btn:hover{border-color:var(--gold)}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--gold); color:var(--bg); border-color:var(--gold)}
.btn.coral{background:var(--coral); border-color:var(--coral); color:#fff}
.btn.ghost{background:transparent}
.btn[aria-pressed="true"]{background:var(--gold); color:var(--bg); border-color:var(--gold)}
.btn:disabled{opacity:.45; cursor:not-allowed}

/* ---------- typography ---------- */
h1,h2,h3{font-family:var(--font-display); font-weight:400; line-height:1.15; text-wrap:balance; margin:0}
h1{font-size:clamp(28px, 6vw, 44px)}
h2{font-size:clamp(20px, 4vw, 26px)}
h3{font-size:18px}
.eyebrow{font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:800}
.muted{color:var(--muted)}
p{margin:0}
.prose{max-width:65ch; display:grid; gap:12px}
.prose ul, .prose ol{margin:0; padding-left:1.2em; display:grid; gap:6px}

/* ---------- game page ---------- */
.game-page{max-width:1080px; margin-inline:auto; display:grid; gap:22px; padding-block:6px 40px}
.game-head{display:grid; gap:6px}
.stage{
  width:100%; max-width:560px; margin-inline:auto; display:grid; gap:12px;
}
.hud{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.stat{
  background:var(--surface); border:2px solid var(--line); border-radius:12px;
  padding:6px 12px; min-width:74px; text-align:center;
}
.stat b{display:block; font-family:var(--font-display); font-size:20px; font-weight:400; font-variant-numeric:tabular-nums}
.stat small{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); font-weight:800}
.controls{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.board-frame{
  background:var(--surface); border:3px solid var(--line); border-radius:var(--r);
  padding:10px; position:relative; touch-action:none; user-select:none; -webkit-user-select:none;
}
canvas.game{display:block; width:100%; height:auto; border-radius:10px; touch-action:none; background:#0e0b2b}

.info-grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items:start}
.card{background:var(--surface); border:2px solid var(--line); border-radius:var(--r); padding:18px; display:grid; gap:10px; min-width:0}

/* ---------- ad slots ---------- */
.ad-slot{
  width:100%; max-width:728px; margin-inline:auto; min-height:90px;
  border:2px dashed var(--line); border-radius:12px; display:grid; place-items:center;
  color:var(--muted); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
}
.ad-slot.live{border:0; min-height:0; display:block}

/* ---------- modal ---------- */
.modal-back{
  position:fixed; inset:0; background:rgba(8,6,28,.75); display:grid; place-items:center;
  z-index:50; padding:16px; animation:fade .2s;
}
.modal{
  background:var(--surface); border:3px solid var(--gold); border-radius:18px;
  padding:24px; max-width:380px; width:100%; text-align:center; display:grid; gap:14px;
  animation:pop .25s cubic-bezier(.2,1.4,.5,1);
}
.modal h2{color:var(--gold)}
.modal .controls{margin-top:4px}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{transform:scale(.85)}}

/* ---------- home ---------- */
.hero{max-width:1080px; margin-inline:auto; padding-block:18px 8px; display:grid; gap:12px}
.hero p{max-width:60ch; color:var(--muted); font-size:17px}
.cats{display:flex; gap:8px; flex-wrap:wrap}
.grid-games{
  max-width:1080px; margin-inline:auto; display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  padding-block:10px 24px;
}
.gcard{
  text-decoration:none; color:var(--fg); background:var(--surface);
  border:2px solid var(--line); border-radius:18px; overflow:hidden; display:flex; flex-direction:column;
  transition:transform .15s, border-color .15s;
}
.gcard:hover{transform:translateY(-4px); border-color:var(--gold)}
.gcard .thumb{aspect-ratio:16/10; max-width:100%; display:block; width:100%; background:#0e0b2b}
.gcard .body{padding:12px 14px 16px; display:grid; gap:6px; flex:1; align-content:start}
.gcard h3{font-size:19px}
.tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:999px; background:var(--surface-2); color:var(--muted)}
.tag.gold{color:var(--gold)} .tag.green{color:var(--green)} .tag.coral{color:var(--coral)} .tag.sky{color:var(--sky)}

/* ---------- footer ---------- */
.site-footer{
  max-width:1080px; margin-inline:auto; border-top:2px solid var(--line);
  padding-block:20px 30px; display:flex; flex-wrap:wrap; gap:12px 20px; justify-content:space-between;
  color:var(--muted); font-size:14px;
}
.site-footer nav{display:flex; gap:14px; flex-wrap:wrap}
.site-footer a{color:var(--muted)}

.toast{
  position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%);
  background:var(--gold); color:var(--bg); font-weight:800; padding:10px 18px; border-radius:999px; z-index:60;
  animation:pop .2s;
}
.dpad{display:grid; grid-template-columns:repeat(3, 56px); grid-template-rows:repeat(2,52px); gap:6px; justify-content:center}
.dpad button{font-size:22px; border-radius:12px; border:2px solid var(--line); background:var(--surface); color:var(--fg); touch-action:manipulation}
.dpad button:active{background:var(--gold); color:var(--bg)}
.dpad .up{grid-column:2}
.dpad .left{grid-column:1; grid-row:2} .dpad .down{grid-column:2; grid-row:2} .dpad .right{grid-column:3; grid-row:2}
@media (hover:hover) and (pointer:fine){ .touch-only{display:none} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }