/* 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;
  /* 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}
.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(--blu));color:var(--fg,#fff);box-shadow:0 var(--lip) 0 var(--lipc,var(--blu-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-btn{width:64px;height:64px;padding:0;border-radius:20px}
.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{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);background:var(--surface);border:2px solid var(--line);border-radius:999px;padding:8px 16px 8px 10px;cursor:pointer;flex:none}
.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 .field{position:relative;width:min(620px,100%);cursor:text}
.onb input{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 34px/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:19px;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}
.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}
.pic .a{position:absolute;inset:0;margin:auto;width:62%;height:auto;cursor:pointer}
.pic .b{position:absolute;width:30%;right:8%;bottom:8%;cursor:pointer;animation:bob 2.8s ease-in-out infinite alternate}
@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;
  background:linear-gradient(var(--sole),var(--sole)) no-repeat 0 0/0% 100%;
  text-decoration:underline dotted 3px var(--line);text-underline-offset:10px;
  transition:background-size 260ms var(--ease-out),transform 520ms var(--spring),text-decoration-color 160ms ease}
.w.on{background-size:100% 100%;text-decoration-color:transparent}
.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 .word{font:500 60px/1 var(--font);display:flex;gap:18px;align-items:baseline;white-space:nowrap}
.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{gap:0}
.word.suffix .slot{min-width:60px}
.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}

/* 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:80px}
.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:not(:has(.lb)){min-height:72px}
.phone .icon-btn{width:52px;height:52px;border-radius:16px;min-height:0;padding:0}
.phone .btn svg{width:24px;height:24px}
.phone .btn{font-size:22px;min-height:56px;padding:14px 22px}
.phone .stars{font-size:22px;padding:6px 12px 6px 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(--blu-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);text-decoration-color:var(--sole-lip)}
  .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(--blu-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)}
.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)}

@media (prefers-reduced-motion:reduce){
  .pic .b,.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}
}