/* Tabelline. Shared pieces (stage, .bar, .btn, .tile, .end, .fb, .cf) come from /app.css. */
.how{font:500 22px/1.3 var(--font);color:var(--ink-2);text-align:center;padding:14px 28px 0;flex:none}
.end .endtxt{font:500 24px/1.3 var(--font);color:var(--ink-2);text-align:center;max-width:24ch}
.phone .end .endtxt{font-size:20px}
.bar .say{margin-left:auto}

/* first screen: how to play, then the tables */
.modes{display:flex;gap:18px;justify-content:center;padding:6px 28px 0;flex:none}
.mode{font-size:24px;min-height:0;height:68px;padding:0 24px 0 14px;gap:10px}
.mode img{width:44px;height:44px}
.mode.on{--bg:var(--t-blu);--fg:#fff;--lipc:var(--t-blu-lip);border-color:var(--t-blu)}
.home{padding:24px 28px 40px}
.tiles.tabs{--cols:5;--rows:2;align-content:center}
.tabs .tile{gap:10px}
.tabs .tile .name.big{font-size:58px;line-height:1}
.tabs .tile .lvl[hidden]{display:none}
.phone .modes{gap:12px;padding:4px 16px 0}
.phone .mode{font-size:19px;height:58px;padding:0 16px 0 10px}
.phone .mode img{width:36px;height:36px}
.phone .how{font-size:18px;padding:12px 22px 0}
.phone .home{padding:20px 22px 30px}
.phone .tiles.tabs{--cols:3;--rows:4;--gx:18px;--gy:22px}
.phone .tabs .tile .name{font-size:24px}
.phone .tabs .tile .name.big{font-size:36px}

/* playing: the question on the left, the number pad on the right */
.board{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:40px;align-items:center;padding:16px 48px 36px}
.qbox{display:flex;flex-direction:column;align-items:center;gap:18px;min-width:0}
.pills{display:flex;gap:14px}
.pill{display:flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 14px;background:var(--surface);border:2px solid var(--line);border-radius:999px;font:500 26px/1 var(--font)}
.pill img{width:36px;height:36px}
.pill svg{width:28px;height:28px;stroke-width:3;color:var(--verde-lip)}
.pill.prog{padding:0 20px}
.pill.time b{min-width:1.3em;text-align:center}
.pill.time.low{border-color:var(--rosso)}
.pill.time.low b{color:var(--rosso)}
.qline{display:flex;align-items:center;gap:22px;font:500 104px/1 var(--font);white-space:nowrap}
.eq{color:var(--ink-2)}
.ans{min-width:210px;height:132px;padding:0 18px;display:grid;place-items:center;border:4px solid var(--line);border-radius:28px;background:var(--surface);color:var(--blu);transition:border-color 160ms ease,color 160ms ease}
.ans.ok{border-color:var(--verde);color:var(--verde-lip)}
.ans.no{border-color:var(--rosso);color:var(--rosso)}
.words{font:500 28px/1.2 var(--font);color:var(--ink-2)}
.qbox .fb{justify-content:center}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.key{height:96px;min-height:0;padding:0;font-size:46px}
.key svg{width:38px;height:38px}
/* end: the ones to go over again */
.end .endtxt{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:none}
.end .rip{font-size:22px;margin-top:4px}
.end .misses{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:540px}
.end .mc{border:2px solid var(--line);border-radius:14px;padding:6px 14px;font:500 24px/1.2 var(--font);color:var(--ink)}
.end .mc b{font-weight:500;color:var(--verde-lip)}

.phone .board{grid-template-columns:1fr;grid-template-rows:auto auto;gap:22px;padding:14px 22px 26px;align-content:center}
.phone .qbox{gap:12px}
.phone .pill{height:46px;font-size:22px}
.phone .pill img{width:30px;height:30px}
.phone .qline{font-size:62px;gap:14px}
.phone .ans{min-width:130px;height:88px;border-radius:20px}
.phone .words{font-size:22px}
.phone .pad{gap:12px}
.phone .key{height:74px;font-size:36px}
.phone .key svg{width:30px;height:30px}
.phone .end .mc{font-size:19px;padding:4px 10px}
.phone .end .rip{font-size:18px}