/* Scrivi veloce: only what /app.css does not already give */
.tiles.three{--cols:3;--rows:1;--gx:34px;--t:min(300px,calc((100cqw - 2 * var(--gx)) / 3),calc(100cqh - 12px));align-content:center;padding-bottom:40px}
.phone .tiles.three{--cols:1;--rows:3;--gy:26px;--t:min(230px,100cqw,calc((100cqh - 12px - 2 * var(--gy)) / 3));padding-bottom:0}
.phone .tiles.three .tile .name{font-size:26px}
.phone .tiles.three .tile .lvl{font-size:15px}
.phone .tiles.three .tile .art{width:40%}

/* top bar extras */
.bar .clock{display:flex;align-items:center;gap:8px;font:500 26px/1 var(--font);background:var(--surface);border:2px solid var(--line);border-radius:999px;height:var(--ctl);padding:0 18px 0 10px;flex:none;box-shadow:0 var(--lip) 0 var(--line);font-variant-numeric:tabular-nums}
.bar .clock img{width:34px;height:34px}
.phone .bar .clock{font-size:22px}
.phone .bar .clock img{width:28px;height:28px}

/* what to type */
.typ{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:6px 28px 0;position:relative}
.typ .top{display:flex;align-items:center;justify-content:center;gap:28px}
.typ .pcs{display:flex;align-items:flex-end;gap:16px}
.pc{width:160px;height:160px;border-radius:var(--r-big);background:var(--t-azzurro);box-shadow:0 8px 0 var(--t-azzurro-lip);display:grid;place-items:center}
.pc img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22))}
.pc.sec{width:130px;height:130px;background:var(--t-giallo);box-shadow:0 6px 0 var(--t-giallo-lip)}
.lv2 .pc{width:130px;height:130px}
.lv2 .pc.sec{width:104px;height:104px}
.big{width:160px;height:160px;border-radius:var(--r-big);background:var(--surface);border:3px solid var(--line);box-shadow:0 8px 0 var(--line);display:grid;place-items:center;font:500 124px/1 var(--font);color:var(--blu)}
.ln{display:block;position:relative;cursor:text;max-width:100%;width:100%;text-align:center}
.target{font-weight:500;line-height:1.35;display:inline;letter-spacing:.02em}
.ch{display:inline-block;color:var(--grigio);border-bottom:5px solid transparent;padding:0 .02em;min-width:.3em}
.ch.sp{min-width:.45em}
.ch.done{color:var(--ink);border-bottom-color:var(--verde)}
.ch.now{color:var(--blu);border-bottom-color:var(--blu)}
.ch.now.miss{border-bottom-color:var(--rosso)}
.ch.now:not(.miss){animation:caret 1.06s steps(1) infinite}
@keyframes caret{50%{border-bottom-color:transparent}}
.ghost{position:absolute;left:50%;top:0;width:2px;height:2px;opacity:0;border:0;padding:0;font-size:16px;pointer-events:none}
.typ .fb{justify-content:center;min-height:40px}
.fb span{white-space:nowrap}

/* the keyboard drawing */
.kb{flex:none;display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 20px 20px}
.kb .kr{display:flex;gap:8px;justify-content:center;width:100%}
.kb .kr.acc{margin-bottom:8px}
.key{font:500 30px/1 var(--font);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;width:74px;height:54px;min-width:0;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:0 5px 0 var(--line);transition:transform 520ms var(--spring),box-shadow 520ms var(--spring),background-color 160ms ease,border-color 160ms ease;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.kr.acc .key{border-color:var(--t-azzurro);box-shadow:0 5px 0 var(--t-azzurro-lip)}
.key.space{width:440px;font-size:22px;color:var(--ink-2)}
.key.nx{background:var(--t-giallo);border-color:var(--t-giallo-lip);box-shadow:0 5px 0 var(--t-giallo-lip);transform:translateY(-4px) scale(1.08)}
.key.down{transform:translateY(4px) scale(.95);box-shadow:0 1px 0 var(--line);transition-duration:90ms;transition-timing-function:var(--ease-out)}
.key:focus-visible{outline:4px solid var(--sole);outline-offset:3px}
@media (hover:hover){ .key:not(.nx):hover{transform:translateY(-2px)} }

/* a tablet with its own keyboard open: keep the accents, hide the drawn letters, text stays at the top */
.os .kb .kr:not(.acc){display:none}
.os .typ{flex:none;padding-top:20px}

/* phone */
.phone .typ{padding:6px 16px 0;gap:10px}
.phone .typ .top{gap:16px}
.phone .pc{width:130px;height:130px}
.phone .pc.sec{width:96px;height:96px}
.phone .lv2 .pc{width:120px;height:120px}
.phone .big{width:130px;height:130px;font-size:100px}
.phone .kb{padding:4px 8px 20px;gap:8px}
.phone .kb .kr{gap:4px}
.phone .key{flex:0 1 48px;width:auto;height:54px;font-size:24px;border-radius:11px}
.phone .key.space{flex:0 1 240px;font-size:19px}

/* the end card */
.stats{display:flex;gap:18px}
.stat{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);border-radius:22px;padding:14px 24px 16px;min-width:170px}
.stat b{font:500 56px/1 var(--font);color:var(--blu)}
.stat span{font:500 20px/1.2 var(--font);color:var(--ink-2)}
.rec{font:500 22px/1.2 var(--font);color:var(--ink-2)}
.phone .stat{min-width:0;padding:12px 16px}
.phone .stat b{font-size:44px}
.phone .stat span{font-size:17px}

@media (prefers-reduced-motion:reduce){
  .ch.now:not(.miss){animation:none}
  .key{transition-property:background-color,border-color,box-shadow}
  .key.nx{transform:none}
}