:root {
  --bg1: #eef6ec;
  --bg2: #d8ead7;
  --card: rgba(255,255,255,.82);
  --text: #183225;
  --muted: #6c7c71;
  --green: #23734a;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--text); }
body { background: radial-gradient(circle at top left, #fff 0, transparent 34%), linear-gradient(145deg, var(--bg1), var(--bg2)); }
.launcher { width: min(100vw, 860px); min-height: 100dvh; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 22px) 18px calc(env(safe-area-inset-bottom) + 18px); }
.hero { display: flex; gap: 16px; align-items: center; margin-bottom: 26px; }
.logo { width: 62px; height: 62px; border-radius: 22px; display:flex; align-items:center; justify-content:center; background: rgba(255,255,255,.9); box-shadow: 0 14px 35px rgba(34,83,53,.14); font-size: 32px; }
h1 { margin: 0; font-size: 34px; letter-spacing: -.8px; }
p { margin: 4px 0 0; color: var(--muted); line-height: 1.35; }
.games-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.game-card { min-height: 172px; padding: 18px; border-radius: 28px; background: var(--card); box-shadow: 0 18px 45px rgba(34,83,53,.12); text-decoration:none; color: inherit; display:flex; gap: 15px; align-items:flex-start; border: 1px solid rgba(255,255,255,.85); }
.game-card.active { cursor:pointer; }
.game-card.disabled { opacity:.58; }
.game-icon { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 20px; display:flex; align-items:center; justify-content:center; background: #edf6ef; font-size: 29px; }
h2 { margin: 2px 0 6px; font-size: 23px; }
span { display:inline-flex; margin-top: 16px; padding: 9px 13px; border-radius:999px; background: var(--green); color:white; font-weight:800; font-size: 13px; }
.disabled span { background:#9aa79e; }
footer { margin-top: 24px; text-align:center; color: var(--muted); font-size: 13px; }