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

/* ---------- Forza 4 ---------- */
.f4{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr);gap:40px;padding:16px 36px 36px;align-items:center}
.f4 .side{display:flex;flex-direction:column;gap:22px}
.f4 .boardbox{container-type:size;height:100%;display:grid;place-items:center;min-width:0}
.players{display:flex;flex-direction:column;gap:12px}
.pl{display:flex;align-items:center;gap:14px;font:500 26px/1 var(--font);color:var(--ink-2);border:2px solid transparent;border-radius:999px;padding:6px 18px 6px 6px;width:max-content;transition:border-color 160ms ease,color 160ms ease}
.pl .tk{width:52px;height:52px}
.pl.on{border-color:var(--ink);color:var(--ink)}
.f4 .status{min-height:44px}
/* the board: --k is one cell; the aim row above it shows whose token is about to fall */
.rig{--k:min(calc(100cqw / 7.3),calc(100cqh / 7.6));width:calc(var(--k) * 7.3)}
.aim{height:var(--k);position:relative;margin:0 calc(var(--k) * .15)}
.aim .tk{position:absolute;left:0;top:calc(var(--k) * .05);width:var(--k);height:var(--k);transform:translateX(calc(var(--c,3) * var(--k))) scale(.84);transition:transform 320ms var(--spring-soft),opacity 200ms ease}
.aim.off .tk{opacity:0}
.board{display:grid;grid-template-columns:repeat(7,1fr);background:var(--t-blu);border-radius:calc(var(--k) * .32);padding:calc(var(--k) * .15);
  box-shadow:inset 0 3px 0 rgba(255,255,255,.3),0 10px 0 var(--t-blu-lip)}
.col{display:flex;flex-direction:column;border:0;background:none;padding:0;cursor:pointer;border-radius:calc(var(--k) * .3);transition:background-color 160ms ease}
.col:focus-visible{outline:4px solid var(--sole);outline-offset:2px}
.hole{width:var(--k);height:var(--k);padding:calc(var(--k) * .08);display:block}
.hole::before{content:"";display:block;width:100%;height:100%;border-radius:50%;background:var(--surface);box-shadow:inset 0 5px 0 color-mix(in srgb,var(--t-blu-lip) 45%,transparent)}
.hole{position:relative}
.hole .tk{position:absolute;inset:calc(var(--k) * .08);z-index:1}
/* tokens: a token color with a lip, a 3D picture on top */
.tk{display:grid;place-items:center;border-radius:50%}
.tk img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.tk.p1{background:var(--t-giallo);box-shadow:inset 0 3px 0 rgba(255,255,255,.45),inset 0 -5px 0 var(--t-giallo-lip)}
.tk.p2{background:var(--t-rosa);box-shadow:inset 0 3px 0 rgba(255,255,255,.35),inset 0 -5px 0 var(--t-rosa-lip)}
.tk.win{outline:5px solid var(--ink);outline-offset:-1px}
.phone .f4{display:flex;flex-direction:column;gap:12px;padding:4px 18px 26px}
.phone .f4 .side{gap:8px;width:100%}
.phone .players{flex-direction:row;gap:8px}
.phone .pl{font-size:20px;padding:4px 14px 4px 4px;gap:8px}
.phone .pl .tk{width:40px;height:40px}
.phone .f4 .boardbox{flex:1;width:100%;min-height:0}
@media (hover:hover) and (pointer:fine){.col:hover{background:rgba(255,255,255,.14)}}
@media (prefers-reduced-motion:reduce){.aim .tk{transition:none}}