/* Indovina la parola: 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%}
.say[hidden]{visibility:hidden}
.nextb[hidden]{display:none}

/* the picture, hidden under three strips; each wrong letter lifts one */
.gw{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:0 24px}
.hint{width:190px;height:190px;flex:none;border-radius:var(--r-big);background:var(--t-azzurro);box-shadow:0 8px 0 var(--t-azzurro-lip);position:relative;overflow:hidden;display:grid;place-items:center}
.hint img{width:74%;height:74%;object-fit:contain;filter:drop-shadow(0 8px 8px rgba(0,0,0,.22))}
.veil{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr)}
.veil i{display:block;transform-origin:50% 0;transition:transform 560ms var(--spring),opacity 260ms var(--ease-out)}
.veil i:nth-child(1){background:var(--t-rosa)}
.veil i:nth-child(2){background:var(--t-arancio)}
.veil i:nth-child(3){background:var(--t-giallo)}
.veil i.off{transform:translateY(-100%);opacity:0}

/* the word: a seedling over every letter, a flower once the letter is found */
.sls{display:flex;justify-content:center;--sw:72px}
.sl{width:var(--sw);display:flex;flex-direction:column;align-items:center;gap:6px}
.sl .fl{width:var(--sw);height:var(--sw);object-fit:contain;filter:drop-shadow(0 5px 5px rgba(0,0,0,.18))}
.sl .lt{width:100%;height:calc(var(--sw) * 1.1);border:3px solid var(--line);border-radius:14px;background:var(--surface);display:grid;place-items:center;font:500 calc(var(--sw) * .72)/1 var(--font);color:var(--ink)}
.sl.got .lt{border-color:var(--verde);border-bottom-width:6px}
.fbrow{display:flex;align-items:center;justify-content:center;gap:22px;min-height:70px}
.fbrow .fb{justify-content:center}
.fb span{white-space:nowrap}

/* the letters */
.abc{flex:none;display:grid;grid-template-columns:repeat(13,64px);gap:9px 8px;justify-content:center;padding:4px 20px 26px}
.key{position:relative;font:500 32px/1 var(--font);color:var(--ink);background:var(--surface);border:2px solid var(--line);border-radius:14px;height:64px;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}
.key svg{position:absolute;top:4px;right:4px;width:17px;height:17px;stroke-width:3.2}
.key.yes{background:var(--t-verde);border-color:var(--t-verde-lip);box-shadow:0 5px 0 var(--t-verde-lip)}
.key.no{color:var(--ink-2);background:var(--line);border-color:var(--grigio);box-shadow:0 1px 0 var(--grigio);transform:translateY(4px)}
.key[aria-disabled]{cursor:default}
.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([aria-disabled]):hover{transform:translateY(-2px)} }

/* phone */
.phone .gw{gap:12px;padding:0 16px}
.phone .hint{width:150px;height:150px}
.phone .fbrow{flex-direction:column;gap:10px;min-height:60px}
.phone .fb{font-size:23px}
.phone .abc{grid-template-columns:repeat(7,minmax(0,52px));gap:8px 6px;padding:4px 12px 20px}
.phone .key{height:54px;font-size:26px}
.phone .key svg{width:14px;height:14px;top:3px;right:3px}

.rec{font:500 24px/1.2 var(--font);color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .veil i{transition:opacity 200ms}
  .veil i.off{transform:none}
  .key{transition-property:background-color,border-color,box-shadow}
}