/* Brain a Day app — menu-styling. Alles via tokens uit js/themes.js
   (--ink/--ink2/--a/--b/--glass/--glass-line/--glow + --bg1/--bg2/--accent...).
   Uiterlijk aanpassen = themes.js; dit bestand bevat alleen structuur. */
:root {
  --bg1:#0d1020; --bg2:#171a3a; --accent:#22d3ee; --accent2:#7c5cff;
  --indigo:#7c5cff; --ok:#34d399; --bad:#fb7185;
  --ink:#eef0ff; --ink2:#a5b4fc; --a:#7c5cff; --b:#22d3ee;
  --glass:rgba(255,255,255,.08); --glass-line:rgba(255,255,255,.14); --glow:none;
}
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { min-height:100%; }
body {
  font-family:'Inter','Segoe UI',system-ui,sans-serif;
  background:linear-gradient(135deg,var(--bg1),var(--bg2));
  min-height:100vh; color:var(--ink);
  padding:calc(18px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}
.app { max-width:560px; margin:0 auto; display:flex; flex-direction:column; gap:16px; }
.app-head { padding:6px 4px 0; }
.hi { font-size:.9rem; color:var(--ink2); opacity:.9; }
.app-head h1 {
  font-size:2rem; font-weight:800; letter-spacing:-.5px; line-height:1.15;
  background:linear-gradient(90deg,var(--ink),var(--a) 60%,var(--b));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.streak {
  display:flex; align-items:center; gap:14px; padding:16px; border-radius:22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--a) 35%,transparent),color-mix(in srgb,var(--b) 18%,transparent));
  border:1px solid var(--glass-line); font-size:1rem;
}
.streak.zero .flame { filter:grayscale(.8); opacity:.7; }
.flame { font-size:1.9rem; }
.sm { font-size:.78rem; color:var(--ink2); margin-top:3px; }
.dots { margin-left:auto; display:flex; gap:5px; }
.dots i { width:9px; height:9px; border-radius:50%; background:var(--glass-line); }
.dots i.on { background:var(--b); box-shadow:0 0 8px var(--b); }
.notice {
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:16px; padding:12px 14px; font-size:.85rem; line-height:1.45;
}
.notice button {
  flex:0 0 auto; background:linear-gradient(90deg,var(--a),var(--b));
  color:#fff; border:none; border-radius:30px; padding:8px 14px;
  font-weight:700; cursor:pointer; font-size:.85rem;
}
.hidden { display:none; }
.sec {
  font-weight:700; font-size:.82rem; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--ink2); margin:6px 4px 12px;
}
.games { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.game-card {
  display:flex; flex-direction:column; min-height:168px; padding:16px;
  border-radius:24px; text-decoration:none; color:var(--ink);
  background:var(--glass); border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .12s ease, box-shadow .2s ease;
}
.game-card:active { transform:scale(.97); }
.game-card.highlight { box-shadow:var(--glow); border-color:var(--b); }
.game-ico {
  width:52px; height:52px; border-radius:16px; display:grid; place-items:center;
  font-size:1.6rem; color:#fff; margin-bottom:auto;
}
.g0 .game-ico { background:linear-gradient(135deg,#7c5cff,#a78bfa); }
.g1 .game-ico { background:linear-gradient(135deg,#06b6d4,#22d3ee); }
.g2 .game-ico { background:linear-gradient(135deg,#f472b6,#fb7185); }
.g3 .game-ico { background:linear-gradient(135deg,#f59e0b,#fbbf24); }
.game-name { font-weight:700; font-size:1.2rem; margin-top:12px; }
.game-desc { color:var(--ink2); font-size:.78rem; line-height:1.35; margin:2px 0 8px; }
.game-state { font-size:.72rem; font-weight:600; color:var(--b); }
.game-card.done .game-state { color:var(--ok); }
.theme-picker {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--glass); border:1px solid var(--glass-line);
  border-radius:18px; padding:12px 14px;
}
.theme-label { font-size:.85rem; font-weight:700; color:var(--ink2); }
.theme-chips { display:flex; gap:8px; flex-wrap:wrap; }
.theme-chip {
  background:var(--glass); color:var(--ink); border:1px solid var(--glass-line);
  border-radius:30px; padding:7px 14px; font-size:.82rem; font-weight:700; cursor:pointer;
}
.theme-chip.active { background:linear-gradient(90deg,var(--a),var(--b)); color:#fff; border-color:transparent; }
footer { text-align:center; color:var(--ink2); opacity:.75; font-size:.8rem; line-height:1.7; padding-top:4px; }
footer a { color:var(--ink2); }