/* Big, bright and thumb-sized — this gets played on a tablet. */
:root{
  --ink:#16263A;
  --paper:#F3F7FB;
  --muted:#5B7089;
  --sky:#1B9AE4;
  --grape:#8A5CF6;
  --lime:#2FB672;
  --mango:#F79327;
  --berry:#EC4F7C;
  --r:26px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Baloo 2',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

.wrap{max-width:900px;margin:0 auto;padding:clamp(20px,5vw,44px) clamp(16px,4vw,28px) 40px}

/* Language pills. Kept small and to one side: a parent sets this once, and it
   should not be the most tappable thing on a six-year-old's screen. */
.langs{display:flex;gap:8px;justify-content:flex-end;margin-bottom:10px}
.lang{
  font:inherit;font-weight:700;font-size:15px;
  padding:.45em 1.1em;border-radius:999px;
  border:2px solid var(--sky);background:transparent;color:var(--sky);
  cursor:pointer;
}
.lang.on{background:var(--sky);color:#fff}

.top{text-align:center;margin-bottom:clamp(22px,5vw,38px)}
.title{
  margin:0;
  font-size:clamp(40px,11vw,68px);
  font-weight:800;
  letter-spacing:-.02em;
  background:linear-gradient(100deg,var(--sky),var(--grape));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:.3em 0 0;font-size:clamp(16px,4vw,20px);color:var(--muted);font-weight:500}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(14px,3.4vw,22px);
}

.card{
  display:flex;flex-direction:column;gap:.45em;
  padding:clamp(20px,4.4vw,28px);
  border-radius:var(--r);
  background:#fff;
  border:3px solid var(--tint,var(--sky));
  box-shadow:0 6px 0 var(--tint,var(--sky));
  color:inherit;text-decoration:none;
  transition:transform .12s ease,box-shadow .12s ease;
}
.card:active{transform:translateY(5px);box-shadow:0 1px 0 var(--tint,var(--sky))}
.card .emoji{font-size:clamp(52px,12vw,68px);line-height:1}
.card .name{font-size:clamp(24px,5.6vw,29px);font-weight:800}
.card .blurb{font-size:clamp(16px,4vw,18px);color:var(--muted);font-weight:500;line-height:1.4}

.card.sky{--tint:var(--sky)}
.card.grape{--tint:var(--grape)}
.card.lime{--tint:var(--lime)}
.card.mango{--tint:var(--mango)}
.card.berry{--tint:var(--berry)}

/* Not playable yet: visible, so it reads as a promise rather than a bug. */
.card.soon{border-style:dashed;box-shadow:none;opacity:.72;cursor:default}
.card.soon:active{transform:none;box-shadow:none}
.tag{
  align-self:flex-start;margin-top:.2em;padding:.25em .7em;border-radius:999px;
  background:var(--tint,var(--sky));color:#fff;font-size:13px;font-weight:700;
}

.loading,.empty{grid-column:1/-1;text-align:center;color:var(--muted);font-weight:500;padding:30px 0}
.foot{margin-top:40px;text-align:center;color:var(--muted);font-size:14px;font-weight:500}

@media (prefers-color-scheme:dark){
  :root{--ink:#EAF2FA;--paper:#121A25;--muted:#93A6BC}
  .card{background:#1B2534}
}