/* Impara kit: one size system for every screen on impara.app (home, Gioca, Libri, the Impara app, every game).
   Load after /app.css. Sizes follow iOS: 44pt minimum touch target, Dynamic Type-like steps, 8pt spacing grid.
   Phone = portrait (the app stage is 390 wide, pages are the real width); tablet = landscape stage 1024x768 or a page wider than 700px.
   Rules: max weight 500, colors only from /app.css tokens, no other font sizes than the --fs-* steps. See DESIGN.md. */
:root{
  /* type steps (phone) */
  --fs-hero:34px; --fs-title:28px; --fs-title2:22px; --fs-head:19px; --fs-body:17px; --fs-sub:15px; --fs-cap:13px;
  /* spacing (8pt grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px;
  /* controls */
  --k-ctl:44px;      /* nav icon buttons, pills that act as buttons */
  --k-btn:56px;      /* primary and secondary buttons */
  --k-pad:16px;      /* screen side padding */
  --k-radius:20px; --k-radius-btn:16px; --k-lip:5px;
  --k-row:84px;      /* level rows */
}
@media (min-width:700px){:root{
  --fs-hero:48px; --fs-title:34px; --fs-title2:28px; --fs-head:22px; --fs-body:19px; --fs-sub:17px; --fs-cap:15px;
  --k-ctl:52px; --k-btn:60px; --k-pad:24px; --k-radius:24px; --k-row:100px;
}}
/* the app and the games use a fixed stage: its class, not the window width, decides */
#stage:not(.phone),.stage:not(.phone){
  --fs-hero:48px; --fs-title:34px; --fs-title2:28px; --fs-head:22px; --fs-body:19px; --fs-sub:17px; --fs-cap:15px;
  --k-ctl:52px; --k-btn:60px; --k-pad:24px; --k-radius:24px; --k-row:100px;
}
#stage.phone,.stage.phone{
  --fs-hero:34px; --fs-title:28px; --fs-title2:22px; --fs-head:19px; --fs-body:17px; --fs-sub:15px; --fs-cap:13px;
  --k-ctl:44px; --k-btn:56px; --k-pad:16px; --k-radius:20px; --k-row:84px;
}

/* ---------- nav bar: back (icon only, left), title, one optional action (right) ---------- */
.bar,.phone .bar{display:flex;align-items:center;flex-wrap:nowrap;gap:var(--s3);padding:max(var(--s3),env(safe-area-inset-top)) var(--k-pad) 0;min-height:calc(var(--k-ctl) + var(--s3));--ctl:var(--k-ctl)}
.bar .title,.phone .bar .title,.phone .bar:has(.lb) .title{font:500 var(--fs-title2)/1.15 var(--font);order:0;flex:1 1 auto;flex-basis:auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .lb,.phone .bar .lb{margin-right:0;gap:var(--s2)}
.icon-btn,.bar .icon-btn,.phone .icon-btn,.phone .bar .icon-btn{--ctl:var(--k-ctl);width:var(--k-ctl);height:var(--k-ctl);min-height:0;padding:0;border-radius:calc(var(--k-ctl) * .3);flex:none}
.icon-btn svg,.phone .icon-btn svg{width:calc(var(--k-ctl) * .5);height:calc(var(--k-ctl) * .5)}
.stars,.phone .stars{height:var(--k-ctl);font-size:var(--fs-head);padding:0 var(--s3) 0 var(--s2)}
.stars img{width:calc(var(--k-ctl) * .6);height:auto}

/* ---------- buttons: one height, two looks (filled, white) ---------- */
.btn,.phone .btn{font:500 var(--fs-head)/1 var(--font);min-height:var(--k-btn);padding:0 var(--s5);border-radius:var(--k-radius-btn);gap:var(--s2);--lip:var(--k-lip)}
.btn svg,.phone .btn svg{width:calc(var(--fs-head) * 1.2);height:calc(var(--fs-head) * 1.2)}
.btn img{width:calc(var(--fs-head) * 1.5);height:auto}
.btn.small{font-size:var(--fs-sub);min-height:var(--k-ctl);padding:0 var(--s4);border-radius:calc(var(--k-ctl) * .3)}
.bar .btn:not(.icon-btn){font-size:var(--fs-sub);min-height:var(--k-ctl);height:var(--k-ctl);padding:0 var(--s4);border-radius:calc(var(--k-ctl) * .3)}

/* ---------- square tiles (collections: activities, games, sections) ---------- */
.tile .name,.phone .tile .name{font:500 var(--fs-head)/1.15 var(--font);text-align:center;text-wrap:balance}
.tile .lvl,.phone .tile .lvl{font:500 var(--fs-cap)/1.2 var(--font);padding:5px 10px;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile,.phone .tile{border-radius:var(--k-radius);gap:var(--s2);padding:var(--s3)}
.tile .art,.phone .tile .art{width:44%}

/* ---------- tile grid on a page (Gioca list): 2 columns on phone, 4 on tablet ---------- */
.tilegrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s4);padding:var(--s5) var(--k-pad) calc(var(--s7) + env(safe-area-inset-bottom));max-width:1100px;margin:0 auto}
.tilegrid .tile{aspect-ratio:1;text-decoration:none;min-width:0}
@media (min-width:700px){.tilegrid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5)}}
/* site pages (not the app stage) scroll normally */
body.page{height:auto;min-height:100svh;overflow:visible}
html:has(body.page){height:auto;overflow:visible}
body.page .bar{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);padding-bottom:var(--s3)}

/* ---------- level list: 2-4 choices as full-width rows (iOS list feel), the same in every game ---------- */
.k-levels{display:flex;flex-direction:column;gap:var(--s3);width:100%;max-width:560px;margin:0 auto;padding:0 var(--k-pad)}
.k-level{--fg:#fff;display:grid;grid-template-columns:calc(var(--k-row) * .62) 1fr auto;align-items:center;gap:var(--s4);min-height:var(--k-row);padding:0 var(--s5) 0 var(--s4);border:0;border-radius:var(--k-radius);color:var(--fg);cursor:pointer;text-align:left;text-decoration:none;font:inherit;
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 78%,#fff) 0%,var(--c) 42%,color-mix(in srgb,var(--c) 90%,#000) 100%);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 var(--k-lip) 0 var(--lipc),0 12px 18px -8px color-mix(in srgb,var(--lipc) 60%,transparent);
  transition:transform 500ms var(--spring),box-shadow 500ms var(--spring)}
.k-level img{width:100%;height:auto;filter:drop-shadow(0 6px 6px rgba(0,0,0,.2))}
.k-level .name{font:500 var(--fs-title2)/1.1 var(--font);text-shadow:0 1px 1px rgba(0,0,0,.25)}
.k-level .sub{display:block;font:500 var(--fs-sub)/1.25 var(--font);opacity:.92;margin-top:var(--s1)}
.k-level .rec{font:500 var(--fs-cap)/1 var(--font);background:var(--surface);color:var(--ink);border-radius:999px;padding:6px 10px;white-space:nowrap}
.k-level:focus-visible{outline:4px solid var(--sole);outline-offset:4px}
.k-level:active,.k-level.down{transform:translateY(4px) scale(.99);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 1px 0 var(--lipc);transition-duration:90ms}
@media (hover:hover){.k-level:hover{transform:translateY(-3px)}}

/* a screen whose body is a level list centers it in the space under the bar */
.home:has(> .k-levels){display:flex;flex-direction:column;justify-content:center;padding:var(--s5) 0}

/* ---------- text ---------- */
.k-hero{font:500 var(--fs-hero)/1.1 var(--font);margin:0}
.k-title{font:500 var(--fs-title)/1.15 var(--font);margin:0}
.k-body{font:400 var(--fs-body)/1.5 var(--font);color:var(--ink-2);margin:0}
.k-sub{font:400 var(--fs-sub)/1.45 var(--font);color:var(--ink-2);margin:0}