/* guidoimpara. UI colors: Macintosh 16 system palette. Tile colors: a softer set chosen to sit together. */
@font-face{font-family:"Nunito Fallback";src:local("Arial Rounded MT Bold"),local("Arial");size-adjust:100%}
:root{
  --ground:#FFFFFF; --surface:#FFFFFF; --line:#BBBBBB;
  --ink:#000000; --ink-2:#444444;
  --blu:#0000CC; --blu-lip:#330099;
  --sole:#FFFF00; --sole-lip:#996633; --sky:#0099FF;
  --verde:#00AA00; --verde-lip:#006600;
  --rosso:#DD0000; --rosso-lip:#663300;
  --grigio:#888888;
  /* blue buttons: white text 5.5:1 on the face (WCAG AA), face to lip 3.07:1 so the edge reads (WCAG 1.4.11) */
  --btn:#2F5BEA; --btn-lip:#081650;
  /* tiles */
  --t-blu:#2F5BEA; --t-blu-lip:#1C3CA8;
  --t-arancio:#FF7A1A; --t-arancio-lip:#C4520A;
  --t-rosa:#F2479B; --t-rosa-lip:#B02370;
  --t-azzurro:#22A6F2; --t-azzurro-lip:#0B74B0;
  --t-giallo:#FFC727; --t-giallo-lip:#C98F00;
  --t-verde:#2DB864; --t-verde-lip:#1A8243;
  --r-big:32px; --r-btn:22px; --r-word:10px; --lip:6px;
  --ease-out:cubic-bezier(.23,1,.32,1);
  /* damped springs sampled into linear(): --spring ~20% overshoot, --spring-soft ~5% */
  --spring:linear(0,0.024,0.090,0.187,0.304,0.432,0.563,0.691,0.809,0.914,1.004,1.076,1.132,1.171,1.195,1.205,1.203,1.192,1.174,1.152,1.126,1.099,1.073,1.048,1.025,1.005,0.989,0.977,0.967,0.961,0.958,0.958,0.960,0.963,0.967,0.972,0.978,0.983,0.988,0.993,0.998,1.001,1.004,1.006,1.008,1.008,1.009,1.008,1);
  --spring-soft:linear(0,0.035,0.121,0.236,0.363,0.490,0.609,0.715,0.805,0.878,0.935,0.978,1.008,1.028,1.040,1.045,1.046,1.043,1.039,1.033,1.027,1.021,1.016,1.012,1.008,1.005,1.002,1.000,0.999,0.998,0.998,0.998,1);
  --font:"Nunito","Nunito Fallback",system-ui,sans-serif;
  --grid-a:.2;
}
*{box-sizing:border-box;margin:0}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
/* workbook squares; stronger on the name screen */
body{background-color:var(--ground);color:var(--ink);font:400 18px/1.55 var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  background-image:linear-gradient(rgba(187,187,187,var(--grid-a)) 1px,transparent 1px),linear-gradient(90deg,rgba(187,187,187,var(--grid-a)) 1px,transparent 1px);background-size:28px 28px;background-position:-1px -1px}
body.naming{--grid-a:.4}
img{display:block;-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
button{font-family:inherit;-webkit-user-select:none;user-select:none}

/* the stage: built at 1024x768 (landscape) or 390x844 (portrait) and scaled to fit, so nothing ever scrolls */
#stage{position:fixed;left:0;top:0;transform-origin:0 0}
/* the height with the browser's bars showing: it never changes while the bars slide, so the stage does not jump */
#svh{position:fixed;left:0;top:0;width:1px;height:100vh;height:100svh;visibility:hidden;pointer-events:none}
.screen{position:absolute;inset:0;display:flex;flex-direction:column}

/* buttons: lip under anything tappable */
.btn{font:500 26px/1 var(--font);border:0;border-radius:var(--r-btn);padding:18px 28px;min-height:64px;display:inline-flex;align-items:center;justify-content:center;gap:12px;cursor:pointer;white-space:nowrap;
  background:var(--bg,var(--btn));color:var(--fg,#fff);box-shadow:0 var(--lip) 0 var(--lipc,var(--btn-lip));
  transition:transform 560ms var(--spring),box-shadow 560ms var(--spring),background-color 160ms ease,border-color 160ms ease,color 160ms ease}
.btn .lab{display:inline-flex;align-items:center;gap:12px}
.btn svg{width:30px;height:30px;stroke-width:2.75;flex:none;transition:transform 520ms var(--spring)}
.btn.white{--bg:var(--surface);--fg:var(--ink);--lipc:var(--line);border:2px solid var(--line)}
.btn.sun{--bg:var(--sole);--fg:var(--ink);--lipc:var(--sole-lip)}
.btn.ok{--bg:var(--verde);--fg:#fff;--lipc:var(--verde-lip)}
.btn.no{--bg:var(--rosso);--fg:#fff;--lipc:var(--rosso-lip)}
.btn[disabled]{--bg:var(--line);--fg:var(--ink-2);--lipc:var(--grigio);cursor:default}
/* icon buttons are square counting their lip: as wide as face + lip */
.icon-btn{--ctl:64px;width:calc(var(--ctl) + var(--lip));height:var(--ctl);min-height:0;padding:0;border-radius:20px}
/* top bar controls: the house (and grid) button and the star pill share one height and one lip */
.bar{--ctl:54px}
.bar .icon-btn{--ctl:inherit;border-radius:18px}
.btn:focus-visible,.tile:focus-visible,.w:focus-visible,.cover:focus-visible,.lv:focus-visible{outline:4px solid var(--sole);outline-offset:4px}

/* top bar */
.bar .lb{display:flex;gap:12px;flex:none}
.bar{display:flex;align-items:center;gap:16px;padding:20px 24px 0;flex:none}
.bar .title:focus{outline:none}
.bar .title{font:500 28px/1.1 var(--font);flex:1;min-width:0;display:flex;align-items:center;gap:12px;white-space:nowrap}
.bar .title .tt{overflow:hidden;text-overflow:ellipsis}
.stars{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--font);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:999px;height:var(--ctl);padding:0 16px 0 10px;cursor:pointer;flex:none;
  box-shadow:0 var(--lip) 0 var(--line);transition:transform 560ms var(--spring),box-shadow 560ms var(--spring)}
.stars img{width:34px;height:34px}
.stars .n{display:inline-grid;overflow:hidden;height:1.15em;align-items:center;min-width:1.2em}
.stars .n span{grid-area:1/1}
.dots{display:flex;gap:8px;flex:none}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--line);transition:background-color 200ms ease}
.dots i.on{background:var(--act,var(--blu))}
.lv{font:500 16px/1 var(--font);color:var(--ink-2);border:2px solid var(--line);border-radius:999px;padding:7px 12px;background:var(--surface);cursor:pointer;flex:none;
  box-shadow:0 3px 0 var(--line);transition:transform 520ms var(--spring),box-shadow 520ms var(--spring)}
.lv.single{cursor:default;box-shadow:none}
.appname{display:inline-flex;align-items:center;cursor:pointer;-webkit-touch-callout:none;border-radius:8px;padding:2px 6px;margin:-2px -6px;
  background:linear-gradient(var(--sole),var(--sole)) no-repeat 0 0/0% 100%;transition:background-size 200ms var(--ease-out)}
.appname.hold{background-size:100% 100%;transition:background-size 650ms linear}

/* name screen */
.onb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;padding:28px}
.onb label{font:500 30px/1 var(--font);color:var(--ink-2)}
.onb .ciao{height:120px;width:auto;margin-bottom:-6px;overflow:visible;cursor:pointer}
.onb .ciao .pen path{fill:none;stroke:#fff;stroke-width:130;stroke-linecap:round;stroke-linejoin:round}
.onb .ciao .ink{fill:var(--rosso)}
/* no text-selection highlight when a finger rests on the lettering or the labels */
.onb .ciao,.onb label,.onb .preview{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.phone .onb .ciao{height:88px}
.onb .field{position:relative;display:block;width:min(620px,100%);cursor:text}
.onb input{-webkit-user-select:text;user-select:text;font:500 64px/1.1 var(--font);width:100%;border:0;padding:6px 8px;text-align:center;outline:none;background:none;color:var(--ink);caret-color:var(--blu)}
.onb .caret{position:absolute;left:50%;top:50%;width:5px;height:70px;margin:-35px 0 0 -2px;background:var(--blu);border-radius:3px;animation:blink 1.06s steps(1) infinite;pointer-events:none}
.onb .field:not(.empty) .caret{display:none}
.onb .field.empty input{caret-color:transparent}
.onb .preview{font:500 34px/1 var(--font);min-height:40px}
.onb .preview .nm:empty::before{content:"...";color:var(--line)}
.onb .cancel{position:absolute;left:24px;top:20px}
@keyframes blink{50%{opacity:0}}

/* home: square tiles sized to fit both ways */
.home{flex:1;min-height:0;container-type:size;padding:28px}
.tiles{--cols:3;--rows:2;--gx:24px;--gy:30px;
  --t:min(calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols)),calc((100cqh - 12px - (var(--rows) - 1) * var(--gy)) / var(--rows)));
  display:grid;grid-template-columns:repeat(var(--cols),var(--t));grid-auto-rows:var(--t);gap:var(--gy) var(--gx);justify-content:center;align-content:start;height:100%}
.tile{--fg:#fff;border:0;border-radius:var(--r-big);color:var(--fg);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:14px;position:relative;
  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 10px 0 var(--lipc),0 20px 22px -8px color-mix(in srgb,var(--lipc) 60%,transparent);
  transition:transform 600ms var(--spring),box-shadow 600ms var(--spring)}
.tile.ink{--fg:var(--ink)}
.tile .art{width:44%}
.tile .art img{width:100%;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22));transition:transform 600ms var(--spring)}
.tile .name{font:500 29px/1.1 var(--font);text-align:center;text-shadow:0 1px 0 rgba(255,255,255,.25)}
.tile:not(.ink) .name{text-shadow:0 1px 1px rgba(0,0,0,.25)}
.tile .lvl{font:500 17px/1 var(--font);background:var(--surface);color:var(--ink);border-radius:999px;padding:8px 14px;box-shadow:inset 0 -2px 0 rgba(0,0,0,.08),0 2px 3px rgba(0,0,0,.15);transition:transform 520ms var(--spring)}
.phone .tiles{--cols:2;--rows:3;--gx:26px;--gy:32px}
.phone .home{padding:var(--head-gap) 22px 26px}
.phone .tile{gap:8px;padding:10px}
.phone .tile .art{width:40%}
.phone .tile .name{font-size:16px;line-height:1.15}
.phone .tile .lvl{font-size:12px;padding:6px 10px}

/* story shelf */
.shelf{flex:1;min-height:0;container-type:size;padding:24px 28px 0}
.shelf .tiles{--cols:4;--rows:2;--gx:22px;--gy:26px}
.phone .shelf{padding:22px 22px 0}
.phone .shelf .tiles{--cols:2;--rows:3;--gx:24px;--gy:28px}
.cover.btn{flex-direction:column;padding:10px;gap:8px;white-space:normal;height:auto;min-height:0;position:relative;width:100%;height:100%}
.cover .cv{flex:1;width:100%;min-height:0;background:var(--sky);border-radius:18px;position:relative;overflow:hidden}
.cover .cv img{position:absolute;inset:0;margin:auto;height:78%;width:auto;max-width:90%;object-fit:contain}
/* a face on the cover gets the story's object on its bottom-right corner, overlapping a little; the face stays centered */
.cover .cv.two{container-type:size;--m:66cqh;--s:calc(var(--m) * .5)}
.cover .cv.two img{inset:auto;margin:0;height:var(--m);width:var(--m);max-width:none;left:calc(50cqw - var(--m) / 2);top:calc(50cqh - var(--m) / 2)}
.cover .cv.two img.cs{height:var(--s);width:var(--s);left:calc(50cqw + var(--m) / 2 - var(--s) * .45);top:calc(50cqh + var(--m) / 2 - var(--s) * .7)}
.cover .ct{font:500 19px/1.15 var(--font);text-align:center;min-height:2.3em;display:flex;align-items:center;justify-content:center;flex:none}
.cover .read{position:absolute;top:-10px;right:-10px;width:36px;height:36px;border-radius:50%;background:var(--verde);color:#fff;display:grid;place-items:center;box-shadow:0 3px 0 var(--verde-lip)}
.cover .read svg{width:22px;height:22px;stroke-width:3.5}
.phone .cover .ct{font-size:16px}
.phone .cover .read{width:30px;height:30px}

/* story reader */
.story{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:28px;padding:24px 28px 0;min-height:0}
.pic{background:var(--sky);border-radius:var(--r-big);position:relative;overflow:hidden;min-height:0;container-type:size;--a:38cqw;--b:calc(var(--a) * .63)}
.pic .a{position:absolute;width:var(--a);height:auto;left:calc(50cqw - var(--a) / 2);top:calc(50cqh - var(--a) / 2);cursor:pointer}
/* the second picture sits on the main one's bottom-right corner, overlapping it a little; the main picture stays centered */
.pic .b{position:absolute;width:var(--b);left:calc(50cqw + var(--a) / 2 - var(--b) * .4);top:calc(50cqh + var(--a) / 2 - var(--b) * .65);cursor:pointer;animation:bob 2.8s ease-in-out infinite alternate}
/* the main picture is a 256px file: on desktop and tablet it stays small enough to look sharp; phones keep it big */
.phone .pic{--a:min(62cqw,68cqh)}
/* level 3: the third picture mirrors the second, on the main one's bottom-left corner */
.pic .c{display:none;position:absolute;width:var(--b);left:calc(50cqw - var(--a) / 2 - var(--b) * .6);top:calc(50cqh + var(--a) / 2 - var(--b) * .65);cursor:pointer;animation:bob 2.8s ease-in-out -1.4s infinite alternate}
.pic.three .c{display:block}
@keyframes bob{from{transform:translateY(-4px)}to{transform:translateY(4px)}}
.txt{display:flex;flex-direction:column;justify-content:center;font:400 44px/1.45 var(--font);position:relative;min-height:0}
.lines{display:flex;flex-direction:column;gap:18px}
.txt .t{display:inline-block;white-space:pre}
.w{font:inherit;color:inherit;border:0;padding:0 4px;margin:0 -4px;border-radius:var(--r-word);cursor:pointer;display:inline-block;
  /* two layers: the yellow sweep on top, a row of dots under the word (drawn as a background so every browser shows it) */
  background:linear-gradient(var(--sole),var(--sole)) no-repeat 0 0/0% 100%,radial-gradient(circle,var(--line) 1.5px,transparent 1.9px) repeat-x 0 calc(100% - .07em)/8px 5px;
  background-origin:content-box,content-box;
  transition:background-size 260ms var(--ease-out),transform 520ms var(--spring)}
.w.on{background-size:100% 100%,8px 5px}
/* the word being read aloud */
.txt .t.speak,.w.speak{background-color:var(--sole);border-radius:var(--r-word);box-shadow:0 0 0 3px var(--sole)}
.txt .t{transition:background-color 120ms ease,box-shadow 120ms ease}
.read.on{--bg:var(--sole);--lipc:var(--sole-lip);border-color:var(--sole-lip)}
.nav{display:flex;justify-content:space-between;align-items:center;padding:22px 28px 26px;flex:none}
.pop{position:absolute;z-index:5;background:var(--surface);border:2px solid var(--line);border-radius:24px;box-shadow:0 14px 32px rgba(0,0,0,.18);
  padding:16px 22px 16px 16px;display:flex;align-items:center;gap:14px;
  opacity:0;transform:scale(.85) translateY(6px);pointer-events:none;transition:opacity 160ms var(--ease-out),transform 460ms var(--spring-soft)}
.pop.show{opacity:1;transform:none;pointer-events:auto}
.pop img{width:64px;height:64px}
.pop .it{font:500 30px/1.1 var(--font)}
.pop .en{font:400 22px/1.2 var(--font);color:var(--ink-2)}
.phone .story{grid-template-columns:1fr;grid-template-rows:280px 1fr;gap:18px;padding:18px 22px 0}
.phone .txt{font-size:31px;justify-content:flex-start}
.phone .lines{gap:12px}
.phone .nav{padding:16px 22px 22px}

/* activities */
.game{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:0 28px;min-height:0}
.card{background:var(--surface);border:2px solid var(--line);border-radius:var(--r-big);display:flex;flex-direction:column;align-items:center;gap:14px;padding:26px 56px 30px;transition:border-color 160ms ease}
.card .imgs{display:flex;justify-content:center}
.card .imgs img{width:150px;height:150px;cursor:pointer}
.card .imgs.many img{width:108px;height:108px;margin:0 -12px}
.card{max-width:100%}
.card .word{font:500 60px/1.15 var(--font);text-align:center;max-width:100%}
.card .word .slot{margin:0 .28em}
.slot{display:inline-block;min-width:92px;text-align:center;border-bottom:5px solid var(--line);color:var(--blu);transition:border-color 160ms ease}
.word.suffix .slot{min-width:60px;margin:0}
.word.elide .slot{margin-right:.04em}
.card.right .word.suffix .slot{min-width:0}
.card.right{border-color:var(--verde);border-width:4px;margin:-2px}
.card.right .slot{color:var(--verde-lip);border-color:var(--verde)}
.card.wrong{border-color:var(--rosso);border-width:4px;margin:-2px}
.fb{font:500 28px/1.2 var(--font);min-height:36px;display:flex;align-items:center;gap:10px}
.fb svg{width:30px;height:30px;stroke-width:3}
.fb.ok{color:var(--verde-lip)} .fb.no{color:var(--rosso)}
.arts{display:grid;gap:18px;padding:18px 28px 30px;width:100%;flex:none}
.arts .btn{font:500 40px/1 var(--font);min-height:92px;--bg:var(--surface);--fg:var(--ink);--lipc:var(--line);border:2px solid var(--line)}
.arts .btn.ok{--bg:var(--verde);--fg:#fff;--lipc:var(--verde-lip);border-color:var(--verde)}
.arts .btn.no{--bg:var(--rosso);--fg:#fff;--lipc:var(--rosso-lip);border-color:var(--rosso)}
.prompt{font:500 64px/1 var(--font)}
.pics{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;width:100%;padding:0 28px 34px;flex:none}
.pics .btn{height:250px;padding:0}
.pics .btn img{width:170px;height:170px}
.slots{display:flex;gap:12px}
.ls{width:76px;height:92px;border:3px solid var(--line);border-radius:18px;display:grid;place-items:center;font:500 60px/1 var(--font);color:var(--blu);background:var(--surface);transition:border-color 160ms ease}
.ls.full{border-color:var(--blu)}
.ls.next{border-color:var(--ink-2)}
.letters{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;padding:18px 28px 34px;width:100%;flex:none}
.letters .btn{width:92px;height:92px;padding:0;font:500 50px/1 var(--font)}
.scene{width:340px;height:210px;background:var(--sky);border-radius:var(--r-big);position:relative;flex:none}
.scene .a{position:absolute;inset:0;margin:auto;width:150px}
.scene .b{position:absolute;width:84px;right:34px;bottom:22px;animation:bob 2.8s ease-in-out infinite alternate}
.line{min-height:104px;width:100%;max-width:880px;border:3px dashed var(--line);border-radius:24px;display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;padding:12px;background:rgba(255,255,255,.6);transition:border-color 160ms ease}
.line.right{border-style:solid;border-color:var(--verde)}
.line .pw{font:500 40px/1 var(--font);padding:14px 18px}
.words{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;padding:18px 28px 34px;width:100%;flex:none}
.words .btn{font:500 38px/1 var(--font);min-height:84px}

/* level picker */
.levels{position:absolute;z-index:30;background:var(--surface);border:2px solid var(--line);border-radius:24px;box-shadow:0 16px 36px rgba(0,0,0,.18);padding:12px;display:grid;gap:10px;min-width:260px;
  opacity:0;transform:scale(.9) translateY(-6px);pointer-events:none;transition:opacity 150ms var(--ease-out),transform 420ms var(--spring-soft)}
.levels.show{opacity:1;transform:none;pointer-events:auto}
.levels .btn{justify-content:flex-start;flex-direction:column;align-items:flex-start;gap:6px;padding:14px 18px;min-height:0}
.levels .btn small{font:400 17px/1.2 var(--font);color:var(--ink-2)}
.levels .btn.cur{border-color:var(--act,var(--blu));border-width:3px}

/* end of a round, end of a story */
.end{position:absolute;inset:0;z-index:40;display:grid;place-items:center;background:rgba(255,255,255,.82)}
.end .panel{background:var(--surface);border:2px solid var(--line);border-radius:36px;box-shadow:0 10px 0 var(--line),0 30px 50px -20px rgba(0,0,0,.25);padding:34px 40px 38px;display:flex;flex-direction:column;align-items:center;gap:18px;max-width:calc(100% - 40px)}
.end .panel>img{width:130px;height:130px}
.end h2{font:500 44px/1.1 var(--font);text-align:center}
.end .got{display:flex;align-items:center;gap:10px;font:500 30px/1 var(--font);color:var(--ink-2)}
.end .got img{width:40px;height:40px}
.end .row{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;margin-top:8px}

/* pagella: this session's work, like a report card on lined paper */
.report{position:absolute;inset:0;z-index:45;display:grid;place-items:center;background:rgba(255,255,255,.82)}
.report .panel{position:relative;background:var(--surface);border:2px solid var(--line);border-radius:30px;box-shadow:0 10px 0 var(--line),0 30px 50px -20px rgba(0,0,0,.25);
  width:min(760px,calc(100% - 40px));padding:28px 32px 24px 64px;overflow:hidden}
.report .panel::before{content:"";position:absolute;left:40px;top:0;bottom:0;width:2px;background:var(--rosso);opacity:.55}
.report .x{position:absolute;right:16px;top:16px}
.report h2{font:500 38px/1.1 var(--font);padding-right:70px}
.report .when{font:400 20px/1.3 var(--font);color:var(--ink-2);margin-top:4px}
.report .total{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--font);margin-top:14px}
.report .total img{width:34px;height:34px}
.report ul{list-style:none;padding:0;margin:18px 0 0}
.report li{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;padding:10px 0;border-top:1px solid var(--line)}
.report li .ic{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--c);box-shadow:inset 0 2px 0 rgba(255,255,255,.35),0 3px 0 var(--lipc)}
.report li .ic img{width:38px;height:38px}
.report li b{font:500 24px/1.2 var(--font);display:block}
.report li small{font:400 18px/1.3 var(--font);color:var(--ink-2);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.report li>div{min-width:0}
.report li .st{display:flex;align-items:center;gap:6px;font:500 22px/1 var(--font)}
.report li .st img{width:26px;height:26px}
.report .none{font:400 22px/1.4 var(--font);color:var(--ink-2);padding:16px 0 6px;border-top:1px solid var(--line);margin-top:18px}
.phone .report .panel{padding:22px 20px 18px 46px}
.phone .report .panel::before{left:28px}
.phone .report h2{font-size:28px;padding-right:60px}
.phone .report li{grid-template-columns:44px 1fr auto;gap:10px}
.phone .report li .ic{width:44px;height:44px;border-radius:12px}
.phone .report li .ic img{width:30px;height:30px}
.phone .report li b{font-size:19px}
.phone .report li small{font-size:15px;white-space:normal}

/* home footer: terms and privacy bottom left, coffee bottom right */
.foot{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 24px 22px;flex:none}
.foot .btn{--ctl:50px;height:var(--ctl);min-height:0;font-size:16px;padding:0 16px 0 10px;gap:8px;border-radius:16px}
.foot .btn img{width:30px;height:30px}
.phone .foot .btn{--ctl:46px;font-size:14px;padding:0 12px 0 6px;gap:6px;border-radius:14px}
.phone .foot .btn img{width:26px;height:26px}
/* legal dialog */
.legal .panel{width:min(760px,calc(100% - 40px));padding:32px 36px 30px;display:flex;flex-direction:column;gap:18px}
.legal .panel::before{display:none}
.legal h2{text-align:center;padding:0 64px}
.legal .lang{position:absolute;left:16px;top:16px}.legal .lang img{width:40px;height:40px}
.legal .tabs{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.legal .tabs .btn{font-size:17px;min-height:44px;padding:8px 16px;border-radius:14px}
.legal .tabs .btn.on{--bg:var(--btn);--fg:#fff;--lipc:var(--btn-lip);border-color:var(--btn)}
.legal .lbody{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.legal .lbody p{font:400 17px/1.45 var(--font);color:var(--ink)}
.legal .del{align-self:flex-start;font-size:16px;min-height:44px;padding:8px 14px;--fg:var(--rosso);margin-top:10px}
.legal .del svg{width:20px;height:20px}
.phone .legal .panel{padding:22px 20px 24px;gap:14px}
.phone .legal h2{font-size:21px;white-space:nowrap;padding:0 56px;min-height:52px;display:flex;align-items:center;justify-content:center}
.phone .legal .lang img{width:30px;height:30px}
.phone .legal .tabs{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.phone .legal .tabs .btn{font-size:14px;min-height:38px;padding:6px 8px}
.phone .legal .lbody{gap:12px;margin-top:10px}
.phone .legal .lbody p{font-size:14px;line-height:1.45}
.phone .legal .del{font-size:13px}
.home{padding-bottom:14px}
.phone .foot{padding:0 22px 20px}
.coffee img{transition:transform 520ms var(--spring)}
@media (hover:hover) and (pointer:fine){.coffee:hover img{transform:scale(1.1)}}
/* coffee dialog, for grown-ups */
.tip .panel{width:min(560px,calc(100% - 40px));padding:28px 32px 26px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.tip .panel::before{display:none}
.tip .cup{width:96px;height:96px}
.tip .lang{position:absolute;left:16px;top:16px}
.tip .lang img{width:40px;height:40px}
.phone .tip .lang img{width:32px;height:32px}
.tip h2,.phone .tip h2{padding:0}
.tip p{font:400 21px/1.4 var(--font);color:var(--ink-2);max-width:40ch}
.tip p.ask{color:var(--ink);font-weight:500}
.tip .row{display:flex;gap:14px;justify-content:center;margin:4px 0 6px}
.tip .row .btn{min-width:92px;font-size:30px}
.tip p.note{font-size:16px}
.phone .tip .panel{padding:22px 20px 20px}
.phone .tip p{font-size:18px}
.phone .tip .row .btn{min-width:76px;font-size:26px}

/* effects */
.cf{position:absolute;left:0;top:0;width:12px;height:12px;z-index:50;pointer-events:none}
.fly{position:absolute;left:0;top:0;width:56px;height:56px;z-index:51;pointer-events:none}

/* phone layout: 2 rows in the bar, everything a size smaller */
.phone{--head-gap:56px}
.phone .bar{flex-wrap:wrap;row-gap:var(--head-gap);padding:16px 22px 0;column-gap:12px}
.phone .bar .lb{margin-right:auto}
.phone .bar:has(.lb) .title{order:10;flex-basis:100%;font-size:28px}
.phone .bar{--ctl:46px}
.phone .bar:not(:has(.lb)){min-height:var(--ctl)}
.phone .icon-btn{--ctl:52px;border-radius:16px}
.phone .bar .icon-btn{--ctl:inherit;min-height:0;border-radius:15px}
.phone .btn svg{width:24px;height:24px}
.phone .btn{font-size:22px;min-height:56px;padding:14px 22px}
.phone .stars{font-size:22px;padding:0 12px 0 8px}
.phone .stars img{width:28px;height:28px}
.phone .dots{gap:6px}
.phone .dots i{width:10px;height:10px}
.phone .card{padding:22px 34px 26px}
.phone .card .imgs img{width:112px;height:112px}
.phone .card .imgs.many img{width:84px;height:84px;margin:0 -10px}
.phone .card .word{font-size:46px}
.phone .arts{padding:16px 22px 24px;gap:16px}
.phone .arts .btn{font-size:34px;min-height:78px}
.phone .fb{font-size:22px}
.phone .fb svg{width:24px;height:24px}
.phone .prompt{font-size:42px}
.phone .pics{grid-template-columns:1fr;gap:16px;padding:0 22px 24px}
.phone .pics .btn{height:124px}
.phone .pics .btn img{width:96px;height:96px}
.phone .slots{gap:8px}
.phone .ls{width:50px;height:62px;font-size:38px;border-radius:14px}
.phone .slots.long{gap:5px}
.phone .slots.long .ls{width:38px;height:52px;font-size:30px;border-radius:10px}
.phone .letters{gap:12px;padding:14px 22px 24px}
.phone .letters .btn{width:64px;height:64px;font-size:34px}
.phone .scene{width:100%;height:170px}
.phone .scene .a{width:120px}
.phone .scene .b{width:64px}
.phone .line{min-height:150px}
.phone .line .pw{font-size:28px;padding:8px 10px}
.phone .words{gap:12px;padding:14px 22px 24px}
.phone .words .btn{font-size:26px;min-height:64px;padding:14px 20px}
.phone .onb input{font-size:52px}
.phone .onb label{font-size:26px}
.phone .onb .preview{font-size:28px}
.phone .end .panel{padding:28px 24px 30px}
.phone .end h2{font-size:34px}
.phone .end .panel>img{width:100px;height:100px}
.phone .lv{font-size:14px;padding:6px 10px}

/* hover: mouse and trackpad only */
@media (hover:hover) and (pointer:fine){
  .btn:not([disabled]):hover{transform:translateY(-2px);box-shadow:0 calc(var(--lip) + 2px) 0 var(--lipc,var(--btn-lip))}
  .btn:not([disabled]):hover .lucide-arrow-right{transform:translateX(5px)}
  .btn:not([disabled]):hover .lucide-arrow-left{transform:translateX(-5px)}
  .btn:not([disabled]):hover .lucide-rotate-ccw{transform:rotate(-60deg)}
  .btn:not([disabled]):hover .lucide-check{transform:scale(1.2)}
  .btn:not([disabled]):hover .lucide-house{transform:translateY(-3px)}
  .btn:not([disabled]):hover .lucide-layout-grid{transform:scale(1.12)}
  .tile:hover{transform:translateY(-5px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 15px 0 var(--lipc),0 26px 26px -8px color-mix(in srgb,var(--lipc) 55%,transparent)}
  .tile:hover .art img{transform:scale(1.08)}
  .tile:hover .lvl{transform:scale(1.06)}
  .w:hover{transform:translateY(-2px)}
  .stars:hover{transform:translateY(-2px);box-shadow:0 calc(var(--lip) + 2px) 0 var(--line)}
  .lv:not(.single):hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--line)}
}
/* press: fast down, spring back up (after hover so it wins) */
.btn.down:not([disabled]){transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--lipc,var(--btn-lip));transition-duration:90ms,90ms,160ms,160ms,160ms;transition-timing-function:var(--ease-out)}
.tile.down{transform:translateY(7px) scale(.985);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(0,0,0,.08),0 3px 0 var(--lipc),0 8px 12px -6px color-mix(in srgb,var(--lipc) 60%,transparent);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.tile.down .art img{transform:scale(.92,.9);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.w.down{transform:scale(.93);transition-duration:90ms,90ms,160ms;transition-timing-function:var(--ease-out)}
.stars.down{transform:translateY(4px) scale(.97);box-shadow:0 2px 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.lv.down:not(.single){transform:translateY(3px) scale(.96);box-shadow:0 0 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}

/* first time in an activity: a bubble under the speaker, and a ring that pulses out of it */
.saytip{position:absolute;z-index:35;display:flex;align-items:center;gap:10px;background:var(--btn);color:#fff;font:500 21px/1.2 var(--font);padding:13px 20px;border-radius:18px;box-shadow:0 5px 0 var(--btn-lip),0 18px 30px -12px rgba(0,0,0,.35);white-space:nowrap;pointer-events:none}
.saytip::before{content:"";position:absolute;top:-8px;left:var(--ax,40px);width:18px;height:18px;background:var(--btn);border-radius:3px;transform:translateX(-50%) rotate(45deg)}
.saytip svg{width:26px;height:26px;stroke-width:2.5;position:relative}
.phone .saytip{font-size:17px;padding:10px 15px;gap:8px}
.phone .saytip svg{width:22px;height:22px}
.say[hidden]{visibility:hidden} /* .btn sets display, which beats [hidden]; keep its place so the header does not jump */
.say.ping{position:relative}
.say.ping::after{content:"";position:absolute;inset:-6px;border-radius:22px;border:4px solid var(--btn);pointer-events:none;animation:ping 1.3s var(--ease-out,ease-out) infinite}
@keyframes ping{from{transform:scale(.92);opacity:1}to{transform:scale(1.35);opacity:0}}
@media (prefers-reduced-motion:reduce){
.say.ping::after{animation:none;transform:none;opacity:1}
  .pic .b,.pic .c,.scene .b{animation:none}
  .pop,.levels{transform:none}
  .btn,.tile,.w,.lv,.btn svg,.tile .art img,.tile .lvl{transition-property:background-color,background-size,border-color,color,box-shadow}
}