/* ---------- 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}

/* ---------- Sudoku dei disegni ---------- */
/* landscape: board left, rule + status + pictures right; phone: one column */
.sd{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 380px;grid-template-rows:1fr auto auto 1fr;gap:0 40px;padding:20px 36px 36px}
.sd .boardbox{grid-column:1;grid-row:1/-1;container-type:size;display:grid;place-items:center;min-height:0}
.sd .side{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:14px;margin-bottom:26px}
.sd .status{min-height:72px;align-items:flex-start}
.sd .pal{grid-column:2;grid-row:3;display:grid;grid-template-columns:1fr 1fr;gap:16px 16px}
.board{--sep:6px;width:min(100cqw,100cqh);aspect-ratio:1;display:grid;gap:6px;position:relative}
.cell{border:2px solid var(--line);border-radius:16px;background:var(--surface);padding:0;display:grid;place-items:center;cursor:pointer;position:relative;min-width:0;min-height:0;
  transition:transform 520ms var(--spring),border-color 160ms ease}
.cell img{width:76%;height:76%;object-fit:contain;pointer-events:none}
.cell.fix{background:color-mix(in srgb,var(--line) 30%,var(--surface));border-color:transparent;cursor:default}
.cell.sel{border:4px solid var(--t-blu);box-shadow:0 4px 0 var(--t-blu-lip)}
.cell:focus-visible{outline:4px solid var(--sole);outline-offset:3px}
.cell.down{transform:scale(.94);transition-duration:90ms}
.cell .bad{position:absolute;right:-8px;top:-8px;width:30px;height:30px;border-radius:50%;background:var(--surface);color:var(--rosso);display:grid;place-items:center;z-index:2;box-shadow:0 2px 0 var(--line)}
.cell .bad svg{width:24px;height:24px;stroke-width:2.75}
/* the row, column or box with a picture twice: a soft dashed frame and an alert icon */
.warn{position:relative;margin:-5px;border:4px dashed var(--rosso);border-radius:20px;background:color-mix(in srgb,var(--rosso) 7%,transparent);pointer-events:none;z-index:1}
.pk.btn{flex-direction:column;gap:6px;padding:10px 8px 12px;min-height:0;font-size:20px;white-space:nowrap}
.pk img{width:62px;height:62px}
.pk.er{grid-column:1/-1;flex-direction:row;gap:10px;padding:12px;font-size:20px}
.pk.er svg{width:26px;height:26px}
.n4 .pk img{width:78px;height:78px}
/* the picture's name, over the cell */
.nm{position:absolute;z-index:20;left:50%;top:50%;transform:translate(-50%,calc(-100% - 10px)) scale(.85);opacity:0;pointer-events:none;background:var(--surface);border:2px solid var(--line);border-radius:16px;padding:8px 16px;
  font:500 26px/1.1 var(--font);white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.15);transition:opacity 140ms var(--ease-out),transform 360ms var(--spring-soft)}
.nm.show{opacity:1;transform:translate(-50%,calc(-100% - 10px))}
.nm.below{transform:translate(-50%,10px) scale(.85)}
.nm.below.show{transform:translate(-50%,10px)}
.phone .sd{display:flex;flex-direction:column;gap:12px;padding:6px 20px 22px}
.phone .sd .side{order:-1;margin:0;gap:4px}
.phone .sd .status{min-height:56px;align-items:center}
.phone .sd .boardbox{flex:1;min-height:0}
.phone .sd .pal{grid-template-columns:repeat(3,1fr);gap:10px}
.phone .sd.n4 .pal{grid-template-columns:repeat(4,1fr)}
.phone .pk.btn{font-size:15px;padding:6px 4px 8px;gap:4px;border-radius:16px}
.phone .pk img,.phone .n4 .pk img{width:42px;height:42px}
.phone .pk.er{padding:8px;font-size:17px}
.phone .board{--sep:4px;gap:4px}
.phone .cell{border-radius:10px}
.phone .nm{font-size:20px;padding:6px 12px}
.phone .cell .bad{width:22px;height:22px;right:-6px;top:-6px}
.phone .cell .bad svg{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.cell:not(.fix):hover{border-color:var(--t-blu)}}
@media (prefers-reduced-motion:reduce){.cell,.nm{transition:none}}