/* ---------- shared Gioca bits (the same in every game). Tokens, .btn, .tile, .bar, .end come from /app.css ---------- */
.screen:focus{outline:none}
/* first screen: the level tiles, sized to fit both ways */
.pick .tiles.n3{--cols:3;--rows:1}
.pick .tiles.n4{--cols:4;--rows:1}
.pick{display:flex;flex-direction:column;justify-content:center}
.pick .tiles{height:auto;flex:none;align-content:center;--t:min(calc((100cqw - (var(--cols) - 1) * var(--gx)) / var(--cols)),calc((100cqh - 12px - (var(--rows) - 1) * var(--gy)) / var(--rows)),300px)}
.phone .pick .tiles.n3,.phone .pick .tiles.n4{--cols:2;--rows:2}
.phone .pick .tiles.n3>:last-child{grid-column:1/-1;justify-self:center;width:var(--t)}
.pick .tile .lvl{white-space:nowrap}
/* game screens on a phone: title next to the back button, so the board gets the room */
.phone .play .bar{row-gap:0}
.phone .play .bar:has(.lb) .title{order:0;flex-basis:auto;font-size:24px}
.end .eline{font:500 26px/1.3 var(--font);color:var(--ink-2);text-align:center}
.phone .end .eline{font-size:21px}
/* the status line: an icon and a short sentence */
.status{font:500 30px/1.2 var(--font);display:flex;align-items:center;gap:12px;min-height:44px}
.status svg{width:32px;height:32px;stroke-width:2.75;flex:none}
.status.no{color:var(--rosso)}
.status.ok{color:var(--verde-lip)}
.rule{font:500 20px/1.35 var(--font);color:var(--ink-2)}
.phone .status{font-size:22px;min-height:34px;gap:8px}
.phone .status svg{width:24px;height:24px}
.phone .rule{font-size:16px}

/* ---------- Simon dei colori ---------- */
.sm{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:44px;padding:16px 36px 40px;align-items:center}
.sm .side{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.sm .go[hidden]{display:none}
.sm .status{min-height:44px}
.scores{display:flex;gap:14px}
.sc{display:flex;flex-direction:column;align-items:center;gap:4px;border:2px solid var(--line);border-radius:22px;padding:10px 18px 12px;min-width:112px;background:var(--surface)}
.sc span{font:500 18px/1 var(--font);color:var(--ink-2)}
.sc b{font:500 46px/1 var(--font);display:inline-block}
.sm .boardbox{container-type:size;height:100%;display:grid;place-items:center;min-width:0}
/* the pads: tiles from the tile tokens, the name on a white label so it reads on every color */
.pads{--cols:2;--rows:2;--g:26px;display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:var(--g);
  width:min(100cqw,calc((100cqh - 12px) * var(--cols) / var(--rows)));aspect-ratio:var(--cols)/var(--rows)}
.n6 .pads{--cols:3;--rows:2}
.pad{border:0;border-radius:var(--r-big);cursor:pointer;position:relative;display:flex;align-items:flex-end;justify-content:center;padding:0 0 18px;
  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);
  transition:transform 420ms var(--spring),box-shadow 420ms var(--spring)}
.pn{font:500 26px/1 var(--font);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 18px;box-shadow:0 2px 3px rgba(0,0,0,.15);transition:transform 420ms var(--spring)}
/* lit: pressed down, a white glow inside and a dark ring outside, so it never depends on color alone */
.pad.on{transform:translateY(6px);transition-duration:80ms;
  box-shadow:inset 0 0 0 14px rgba(255,255,255,.55),inset 0 0 40px 10px rgba(255,255,255,.5),0 4px 0 var(--lipc),0 0 0 7px var(--ink)}
.pad.on .pn{transform:scale(1.15)}
.pad.hint{box-shadow:inset 0 0 0 14px rgba(255,255,255,.55),0 10px 0 var(--lipc),0 0 0 7px var(--verde)}
.pad.down{transform:translateY(6px);box-shadow:inset 0 3px 0 rgba(255,255,255,.4),0 4px 0 var(--lipc);transition-duration:80ms}
.pad:focus-visible{outline:4px solid var(--sole);outline-offset:6px}
.watching .pad{cursor:default}
.phone .sm{display:flex;flex-direction:column;gap:12px;padding:4px 22px 26px;align-items:stretch}
.phone .sm .side{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"sc go" "st st" "ru ru";gap:8px 14px;align-items:center}
.phone .scores{grid-area:sc;gap:8px}
.phone .sc{min-width:84px;padding:6px 10px 8px;border-radius:16px}
.phone .sc span{font-size:14px}
.phone .sc b{font-size:30px}
.phone .sm .go{grid-area:go;justify-self:end}
.phone .sm .status{grid-area:st;min-height:34px}
.phone .sm .rule{grid-area:ru}
.phone .sm .boardbox{flex:1;min-height:0}
.phone .pads{--g:18px}
.phone .n6 .pads{--cols:2;--rows:3}
.phone .pn{font-size:20px;padding:7px 14px}
.phone .pad{padding-bottom:14px;border-radius:26px}
@media (prefers-reduced-motion:reduce){.pad,.pn{transition:none}.pad.on{transform:none}}