/* Play & Learn shared styles: tokens, header buttons, chips, the options screen.
   Games may override the color tokens to set their own world. */
:root{
  --ink:#14212b; --paper:#fff8ec; --sun:#ffc94a; --coral:#ff7a59; --sky:#3fa7c9; --deep:#123047; --leaf:#43c59e;
  --display:"Baloo 2","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Avenir Next","Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;font-family:var(--body);font-size:18px;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:manipulation}
button{font:inherit}
button:focus-visible{outline:4px solid var(--sun);outline-offset:3px}
.round{flex:none;width:64px;height:64px;border-radius:50%;border:0;background:#fff;color:var(--deep);display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.22)}
.round:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(0,0,0,.22)}
.round svg{width:34px;height:34px}
.round[aria-pressed="true"]{background:var(--sun)}

.pal-overlay{position:fixed;inset:0;z-index:50;background:var(--deep);color:#fff;display:flex;flex-direction:column;align-items:center;gap:14px;padding:24px 16px 190px;padding-top:max(24px,env(safe-area-inset-top));overflow-y:auto;text-align:center}
.pal-overlay h2{margin:0;font-family:var(--display);font-size:clamp(28px,4vw,40px)}
.pal-row{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;max-width:640px}
.pal-label{font-family:var(--display);font-weight:800;font-size:16px;letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.pal-row small{opacity:.8;max-width:34em;font-size:15px}
.pal-input{font-family:var(--display);font-weight:800;font-size:28px;text-align:center;width:min(360px,100%);padding:8px 16px;border-radius:999px;border:4px solid var(--sun);background:#fff;color:var(--deep);-webkit-user-select:text;user-select:text}
.pal-input:focus{outline:4px solid var(--coral);outline-offset:2px}
.pal-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pal-chip{border:0;border-radius:999px;padding:12px 22px;font-family:var(--display);font-weight:800;font-size:clamp(18px,2.4vw,22px);background:#fff;color:var(--deep);box-shadow:0 5px 0 rgba(0,0,0,.25);cursor:pointer}
.pal-chip[aria-pressed="true"]{background:var(--sun)}
.pal-chip:disabled{opacity:.45;cursor:default}
.pal-chip:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.pal-done{margin-top:6px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* consent bar for parents */
.pal-consent{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;color:var(--deep);box-shadow:0 -6px 24px rgba(0,0,0,.18);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;padding:14px 16px;padding-bottom:max(14px,env(safe-area-inset-bottom));font-size:16px;font-weight:600}
.pal-consent p{margin:0;max-width:46em;line-height:1.4}
.pal-consent a,.pal-overlay a{color:inherit;text-decoration:underline}
.pal-consent .pal-chip{font-size:18px;padding:10px 20px;box-shadow:0 4px 0 rgba(0,0,0,.18);border:2px solid var(--deep)}
.pal-consent .pal-yes{background:var(--sun)}