/* Porchle */
[hidden]{display:none!important}
.pch{gap:0;align-items:stretch}
.pch-info{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:.9rem;min-height:1.4em;margin-bottom:10px}
.pch-board{container-type:inline-size;display:flex;flex-direction:column;gap:6px;width:100%;max-width:520px;margin:0 auto}
.pch-row{display:grid;grid-template-columns:repeat(var(--n,12),1fr);gap:4px}
.pch-t{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:2px solid var(--line);border-radius:8px;background:transparent;font-style:normal;font-weight:700;color:var(--ink);text-transform:uppercase;font-family:"Trebuchet MS",system-ui,sans-serif;font-size:clamp(.6rem,calc(52cqw / var(--n,12)),1.6rem);line-height:1;user-select:none}
.pch-t.fix{background:var(--sky);border-color:var(--sky);color:var(--muted)}
.pch-t.f{border-color:var(--muted)}
.pch-t.g{background:var(--accent);border-color:var(--accent);color:#fff}
.pch-t.y{background:var(--sun);border-color:var(--sun);color:#1C2540}
.pch-t.n{background:#2F3649;border-color:#2F3649;color:#8E98B0}
:root[data-theme="dark"] .pch-t.n{background:#080C16;border-color:#080C16;color:#566080}
.pch-t.pop{animation:pch-pop .12s ease-out}
.pch-t.flip{animation:pch-flip .5s ease-in-out}
.pch-t.bounce{animation:pch-bounce .6s ease}
.pch-row.shake{animation:pch-shake .4s}
@keyframes pch-pop{50%{transform:scale(1.12)}}
@keyframes pch-flip{0%{transform:scaleY(1)}50%{transform:scaleY(0)}100%{transform:scaleY(1)}}
@keyframes pch-bounce{0%,100%{transform:none}40%{transform:translateY(-12px)}}
@keyframes pch-shake{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(5px)}}
.pch-msg{text-align:center;min-height:2.6em;margin:14px 0 6px}
.pch-msg p{margin:4px 0 0;color:var(--ink)}
.pch-sol{color:var(--accent);letter-spacing:.04em}
.pch-actions{text-align:center;margin-bottom:12px}
.pch-actions .btn.in{animation:pch-pop .4s ease-out}
.pch-kb{display:flex;flex-direction:column;gap:6px;max-width:520px;width:100%;margin:6px auto 0}
.pch-kr{display:flex;justify-content:center;gap:4px}
.pch-k{font:inherit;font-weight:600;font-size:.95rem;flex:1 1 0;max-width:44px;min-width:0;height:46px;padding:0;border:0;border-radius:8px;background:var(--sky);color:var(--ink);cursor:pointer;text-transform:uppercase;transition:background-color .2s}
.pch-k.wide{flex:1.6 1 0;max-width:72px;font-size:.8rem}
.pch-k:hover{filter:brightness(.96)}
.pch-k.g{background:var(--accent);color:#fff}
.pch-k.y{background:var(--sun);color:#1C2540}
.pch-k.n{background:#2F3649;color:#8E98B0}
:root[data-theme="dark"] .pch-k.n{background:#080C16;color:#566080}
@media (max-width:480px){.pch-k{height:42px;font-size:.85rem}.pch-row{gap:3px}.pch-board{gap:4px}}

/* ---- Indizio, resa, statistiche ---- */
.pch-t[data-h]:empty::after{content:attr(data-h);color:var(--accent);opacity:.4}
.pch-t[data-h]:empty{border-style:dashed;border-color:var(--accent)}
.pch-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0 0}
.pch-tools .btn{font-size:.85rem;padding:8px 12px}
.pch-ov{--mb:#fff;--mi:#1C2540;--ml:#d5dae6;--mbar:#8E98B0;position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(0,0,0,.6)}
:root[data-theme="dark"] .pch-ov{--mb:#121212;--mi:#fff;--ml:#2a2a2a;--mbar:#3a3a3c}
.pch-modal{position:relative;width:100%;max-width:440px;max-height:90vh;overflow:auto;background:var(--mb);color:var(--mi);border:1px solid var(--ml);border-radius:12px;padding:26px 22px 22px;box-shadow:0 10px 40px rgba(0,0,0,.4);text-align:center}
.pch-modal h3{margin:14px 0 12px;font-size:1rem;letter-spacing:.06em;text-transform:uppercase}
.pch-x{position:absolute;top:8px;right:10px;background:none;border:0;color:inherit;font-size:1.2rem;cursor:pointer;padding:6px;line-height:1}
.pch-sg{display:flex;justify-content:center;gap:14px}
.pch-sg div{display:flex;flex-direction:column;align-items:center;width:72px}
.pch-sg b{font-size:2rem;font-weight:400;line-height:1.2}
.pch-sg span{font-size:.7rem;line-height:1.15}
.pch-dist{display:flex;flex-direction:column;gap:4px;margin:0 8px}
.pch-dist div{display:flex;align-items:center;gap:6px;font-size:.85rem}
.pch-dist span{width:1em;text-align:right}
.pch-dist i{font-style:normal;font-weight:700;font-size:.8rem;text-align:right;padding:2px 6px;background:var(--mbar);color:#fff;border-radius:2px;box-sizing:border-box}
.pch-dist i.win{background:var(--accent)}
.pch-res{margin:16px 0 0}
.pch-foot{display:flex;justify-content:center;gap:10px;margin-top:16px;flex-wrap:wrap}
.pch-share{background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important}
.pch-ad-tag{font-size:.7rem;letter-spacing:.1em;opacity:.7;margin-bottom:10px}
.pch-ad-box{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 16px;margin-bottom:16px;border-radius:10px;background:linear-gradient(135deg,#ffb347,#ff6b6b);color:#1C2540}
.pch-ad-emoji{font-size:3rem}
.pch-ad-box strong{font-size:1.3rem}
.pch-ad-box span{font-size:.85rem}
.pch-ad-cta{background:#1C2540;color:#fff;padding:6px 14px;border-radius:999px;font-weight:700}
.pch-ad-close:disabled{opacity:.6;cursor:not-allowed}

/* ---- Casella selezionabile e righe bloccate dagli indizi ---- */
.pch-row:not(.lock) .pch-t:not(.fix):not(.g):not(.y):not(.n){cursor:pointer}
.pch-t.sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.pch-row.lock{opacity:.3}
.pch-row.lock .pch-t{pointer-events:none;border-style:dotted}
.pch-row.lock .pch-t:not(.fix)::after{content:"\2715";opacity:.5}
/* ---- Animazione pannello statistiche ---- */
.pch-ov{animation:pch-ov-in .25s ease-out both}
.pch-ov.out{animation:pch-ov-out .2s ease-in both}
.pch-ov.out .pch-modal{animation:pch-modal-out .2s ease-in both}
.pch-modal{animation:pch-modal-in .55s cubic-bezier(.2,1.1,.3,1) both}
@keyframes pch-ov-in{from{opacity:0;backdrop-filter:blur(0)}to{opacity:1;backdrop-filter:blur(4px)}}
@keyframes pch-ov-out{to{opacity:0}}
@keyframes pch-modal-in{0%{opacity:0;transform:translateY(40px) scale(.85) rotateX(14deg)}60%{opacity:1}100%{opacity:1;transform:none}}
@keyframes pch-modal-out{to{opacity:0;transform:translateY(20px) scale(.94)}}
.pch-st-a{animation:pch-rise .5s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(.15s + var(--i,0) * .09s)}
@keyframes pch-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pch-sg .pch-st-a b{animation:pch-numpop .6s ease-out both;animation-delay:calc(.25s + var(--i,0) * .09s)}
@keyframes pch-numpop{0%{transform:scale(.4)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.pch-dist i{animation:pch-grow .7s cubic-bezier(.2,.9,.3,1) both;animation-delay:calc(.55s + var(--i,0) * .1s)}
@keyframes pch-grow{from{width:8%;opacity:.4}}
.pch-dist i.win{animation:pch-grow .7s cubic-bezier(.2,.9,.3,1) both,pch-glow 1.6s ease-in-out 2;animation-delay:calc(.55s + var(--i,0) * .1s),1.4s}
@keyframes pch-glow{50%{box-shadow:0 0 0 3px var(--accent),0 0 16px var(--accent)}}
@media (prefers-reduced-motion:reduce){.pch-ov,.pch-modal,.pch-st-a,.pch-dist i,.pch-sg b{animation-duration:.01s!important;animation-delay:0s!important}}