/* ============ Games Hub — shared styles (calm palette, large touch targets) ============ */
:root{
  --bg1:#fbf3e7; --bg2:#f0e2cd; --ink:#4a3a24; --dim:#8a7355; --card:#fffdf9;
  --line:#e4d3b8; --accent:#d8570f; --accent-dark:#b8480c; --good:#0a9b74; --gold:#e8b23a;
}
*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; min-height:100%; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; color:var(--ink);
  background:linear-gradient(170deg,var(--bg1),var(--bg2) 70%,var(--bg1));
  -webkit-user-select:none; user-select:none;
  touch-action:manipulation;   /* iOS ignores user-scalable=no — this reliably kills double-tap-to-zoom; the grid cells set their own touch-action:none for drag-select */
  /* respect the iOS notch / home indicator in the Capacitor wrap */
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{ max-width:560px; margin:0 auto; padding:18px 20px 60px; }

/* ---- top bar: coin balance + subscribe ---- */
.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }
.coins{ display:inline-flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line);
  border-radius:22px; padding:8px 15px; font-weight:800; font-size:18px; box-shadow:0 3px 10px rgba(90,60,25,.08); }
/* Gold coin drawn in CSS (the 🪙 emoji renders dull grey on iOS Safari; font-size:0 hides the glyph). */
.coins .c{ font-size:0; width:20px; height:20px; border-radius:50%; display:inline-block; flex:0 0 auto;
  background:radial-gradient(circle at 34% 30%, #fff2ac 0%, #f6c94a 45%, #e0982a 100%);
  box-shadow:inset 0 0 0 2px #d98e22, inset -2px -3px 4px rgba(150,90,10,.35), 0 1px 1px rgba(0,0,0,.15); }
.coins.bump{ animation:bump .4s ease; }
@keyframes bump{ 0%{transform:scale(1)} 40%{transform:scale(1.18)} 100%{transform:scale(1)} }
.subbtn{ border:none; background:var(--accent); color:#fff; font-weight:800; font-size:14px;
  padding:9px 16px; border-radius:22px; box-shadow:0 3px 0 var(--accent-dark); cursor:pointer; }
.subbtn:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--accent-dark); }
.subbtn.sub{ background:var(--good); box-shadow:0 3px 0 #077a5b; }

.brand{ font-size:30px; font-weight:800; text-align:center; }
.brand .leaf{ color:var(--good); }
.tag{ text-align:center; color:var(--dim); font-size:17px; margin:6px 0 16px; }
.hubstreak{ text-align:center; margin:0 0 18px; }
.hubstreak b{ display:inline-block; background:#f8eedd; color:#8a5a1e; font-weight:700; font-size:15px; padding:8px 16px; border-radius:22px; }

/* ---- game cards ---- */
.games{ display:grid; gap:16px; }
.game{ position:relative; display:flex; align-items:center; gap:16px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:20px; padding:18px 20px;
  box-shadow:0 4px 14px rgba(90,60,25,.10); transition:transform .08s; }
a.game:active{ transform:translateY(2px); }
.ico{ width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center;
  font-size:34px; background:linear-gradient(160deg,#fbf3e7,#e9dbc1); border:1px solid var(--line); flex:0 0 auto; }
.gname{ font-size:21px; font-weight:800; }
.gdesc{ color:var(--dim); font-size:15px; margin-top:2px; }
.soon{ text-align:center; color:var(--dim); font-size:14px; margin-top:26px; }
.badge{ position:absolute; top:14px; right:16px; background:#eef7f2; color:#0a9b74; font-size:12px; font-weight:800;
  padding:5px 11px; border-radius:20px; border:1px solid #cfe9dd; }

footer{ text-align:center; color:var(--dim); font-size:13px; margin-top:34px; line-height:1.9; }
footer a{ color:#a06a2e; }

/* ---- generic button used in games ---- */
.btn{ border:none; border-radius:18px; font-weight:800; font-size:16px; padding:12px 18px; cursor:pointer; }
.btn.primary{ background:var(--accent); color:#fff; box-shadow:0 3px 0 var(--accent-dark); }
.btn.primary:active{ transform:translateY(2px); box-shadow:0 1px 0 var(--accent-dark); }
.btn.ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); }
.btn:disabled{ opacity:.5; }