/* TapABCs — friendly, calm, kid-friendly. Softer palette, solid colors (no rainbow overload). */
:root{
  --ink:#33314d; --muted:#7a7891; --paper:#fff; --line:#eceaf5;
  --coral:#ff7a7a; --amber:#ffab52; --sunny:#ffcf5c; --mint:#4bc48a;
  --sky:#5aa9f0; --lilac:#9b8cf0; --pink:#ff8fbb; --teal:#48c2c2;
  --accent:#6b5cd6;                              /* one friendly brand color */
  --shadow:0 10px 26px -14px rgba(60,50,120,.45);
  --radius:20px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Fredoka",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); background:#f5f6fc; min-height:100vh;
  -webkit-tap-highlight-color:transparent; overflow-x:hidden;
}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
.wrap{max-width:960px;margin:0 auto;padding:0 18px}

/* top bar */
.bar{display:flex;align-items:center;gap:12px;max-width:960px;margin:0 auto;padding:14px 18px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:21px;color:var(--accent)}
.brand .logo{width:38px;height:38px;border-radius:12px;background:var(--accent);
  display:grid;place-items:center;font-size:20px}
.bar .spacer{flex:1}
.homebtn{display:inline-flex;align-items:center;gap:7px;font-weight:500;font-size:15px;background:#fff;color:var(--accent);
  border:1px solid var(--line);border-radius:999px;padding:9px 15px;box-shadow:var(--shadow);cursor:pointer}
.stars{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:17px;background:#fff;color:#e79a1c;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;box-shadow:var(--shadow)}

/* headings — single friendly color, not rainbow */
h1.big{font-size:clamp(28px,5.4vw,44px);text-align:center;margin:10px 0 4px;line-height:1.08;color:var(--ink);font-weight:600}
.sub{text-align:center;color:var(--muted);font-size:clamp(15px,2.6vw,18px);font-weight:400;margin:0 auto 6px;max-width:600px}

/* game shell — clean white card */
.stage{max-width:720px;margin:10px auto 28px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:22px 18px 26px;text-align:center}
.prompt{font-size:clamp(19px,3.6vw,26px);font-weight:500;margin:2px 0 16px;color:var(--ink)}

/* tiles / choice buttons — solid, soft */
.tiles{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.tile{border:none;cursor:pointer;border-radius:18px;color:#fff;font-weight:600;
  box-shadow:0 6px 14px -8px rgba(60,50,120,.5); transition:transform .08s, filter .1s; user-select:none}
.tile:active{transform:scale(.94)}
.tile.pop{animation:pop .3s}
.tile.good{animation:good .5s}
.tile.bad{animation:bad .4s}
@keyframes pop{0%{transform:scale(.8)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes good{0%,100%{transform:scale(1)}45%{transform:scale(1.14)}}
@keyframes bad{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* big action button — one calm accent */
.play{display:inline-flex;align-items:center;gap:9px;font-size:18px;font-weight:600;color:#fff;
  background:var(--mint);border:none;border-radius:999px;padding:13px 24px;box-shadow:var(--shadow);cursor:pointer;margin:6px}
.play.alt{background:var(--sky)}
.play.mode{background:#f1f0fa;color:var(--accent);box-shadow:none;border:1px solid var(--line)}
.play.mode.on{background:var(--accent);color:#fff;border-color:transparent}

/* feedback toast */
.toast{position:fixed;left:50%;top:20%;transform:translateX(-50%) scale(.8);opacity:0;
  background:#fff;color:var(--mint);font-weight:600;font-size:24px;padding:13px 26px;border-radius:999px;
  box-shadow:var(--shadow);pointer-events:none;z-index:60;transition:transform .2s,opacity .2s}
.toast.show{opacity:1;transform:translateX(-50%) scale(1)}
#confetti{position:fixed;inset:0;pointer-events:none;z-index:50}

/* hub cards — white with a colored top strip + icon (calm, not full-color blocks) */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin:18px 0 8px}
.card{display:block;border-radius:20px;padding:20px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);transition:transform .12s;position:relative;min-height:150px}
.card:active{transform:scale(.98)}
.card .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:30px;color:#fff}
.card h3{margin:12px 0 4px;font-size:21px;font-weight:600;color:var(--ink)}
.card p{margin:0;font-size:14px;font-weight:400;color:var(--muted);line-height:1.4}
.card .go{position:absolute;right:16px;top:22px;font-size:20px;color:var(--muted)}

/* footer */
.foot{text-align:center;color:var(--muted);font-size:14px;font-weight:400;padding:24px 16px 34px}
.foot a{color:var(--accent);font-weight:500;margin:0 8px}
.cta{display:inline-flex;align-items:center;gap:9px;background:var(--ink);color:#fff;font-weight:500;font-size:15px;
  border-radius:14px;padding:11px 18px;box-shadow:var(--shadow);margin:6px}

/* policy page */
.doc{max-width:740px;margin:12px auto 40px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 26px 34px}
.doc h1{font-size:28px;margin:0 0 6px;color:var(--accent);font-weight:600}
.doc h2{font-size:18px;margin:22px 0 6px;color:var(--ink);font-weight:600}
.doc h2:first-of-type{margin-top:8px}
.doc p,.doc li{line-height:1.6;color:#4a4863;margin:7px 0}
@media(max-width:520px){ .bar{gap:8px} .brand span{display:none} }