/* ==========================================================================
   Logica · Griglie (js/logica/griglie.js): nonogram, futoshiki, kenken,
   binario, grattacieli, kakurasu, campo minato, lights out.
   Il lato della casella (--gc) lo calcola il JS dallo spazio disponibile.
   ========================================================================== */
.gr { --gr-accent: #5e9cff; --gr-lit: #ffc83d; }
.gr-time { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 14px; min-width: 38px; text-align: right; }
.gr .lg-board { overflow: visible; }

.gr-board {
  --gc: 40px;
  display: grid; position: relative;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.gr-c {
  position: relative; box-sizing: border-box; width: var(--gc); height: var(--gc);
  display: grid; place-items: center; cursor: pointer; color: var(--ink);
  transition: background 0.12s;
}

/* --- numeri (futoshiki, kenken, grattacieli) --- */
.gr-lat .gr-c { font-size: calc(var(--gc) * 0.5); font-weight: 600; color: var(--gr-accent); box-shadow: inset 0 0 0 0.5px var(--stroke-2); }
.gr-lat .gr-c.gr-giv { color: var(--ink); font-weight: 750; background: var(--fill-2); }
.gr-lat .gr-c.gr-hl { background: var(--fill-2); }
.gr-lat .gr-c.gr-same { background: color-mix(in srgb, var(--gr-accent) 13%, transparent); }
.gr-lat .gr-c.gr-sel { background: color-mix(in srgb, var(--gr-accent) 30%, transparent); }
.gr-lat .gr-c.gr-dup .gr-v { color: var(--ko); }
.gr-lat .gr-c.gr-bad { background: var(--ko-fill); }
.gr-lat .gr-c.gr-bad .gr-v { color: var(--ko); }
.gr-v { line-height: 1; }
.gr-notes {
  display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; height: 100%; box-sizing: border-box; padding: 9% 10%;
  font-size: calc(var(--gc) * 0.22); font-weight: 500; color: var(--ink-2);
}
.gr-notes.gr-nt3 { grid-template-columns: repeat(3, 1fr); }
.gr-notes i { font-style: normal; display: grid; place-items: center; line-height: 1; }
.gr-kenken-b .gr-notes { padding-top: 30%; }

.gr-pad { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 12px; }
.gr-key { width: 46px; height: 46px; padding: 0; font-size: 19px; font-weight: 600; border-radius: 14px; }
.gr-key svg { width: 20px; height: 20px; }
.gr-pad-notes .gr-key[data-v]:not([data-v="0"]) { font-size: 14px; color: var(--ink-2); border-style: dashed; }

/* futoshiki: caselle separate e segni in mezzo */
.gr-futoshiki-b .gr-c { border-radius: 10px; background: var(--fill); box-shadow: inset 0 0 0 1px var(--stroke-2); }
.gr-futoshiki-b .gr-c.gr-sel { box-shadow: inset 0 0 0 2px var(--gr-accent); }
.gr-sg { display: grid; place-items: center; }
.gr-sg svg { width: calc(var(--gc) * 0.36); height: calc(var(--gc) * 0.36); fill: none; stroke: var(--ink-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.gr-sg-r svg { transform: rotate(180deg); }
.gr-sg-u svg { transform: rotate(90deg); }
.gr-sg-d svg { transform: rotate(-90deg); }
.gr-sg.gr-ko svg { stroke: var(--ko); stroke-width: 2.4; }

/* kenken: bordo spesso delle gabbie (box-shadow messo dal JS) */
.gr-kenken-b { --gr-cage: var(--ink-2); }
.gr-cage {
  position: absolute; top: 2px; left: 4px; font-style: normal; line-height: 1.1;
  font-size: max(10px, calc(var(--gc) * 0.23)); font-weight: 650; color: var(--ink-2); pointer-events: none;
}
.gr-cage.gr-ko { color: var(--ko); }
.gr-kenken-b .gr-c .gr-v { margin-top: 12%; }

/* grattacieli e kakurasu: indizi sul bordo */
.gr-clue { display: grid; place-items: center; font-size: calc(var(--gc) * 0.4); font-weight: 650; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.gr-clue.gr-ok { color: var(--ok); }
.gr-clue.gr-ko { color: var(--ko); }
.gr-idx { display: grid; place-items: center; font-size: calc(var(--gc) * 0.3); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* --- caselle da annerire (nonogram, kakurasu) --- */
.gr-nono, .gr-kak { touch-action: none; }
.gr-nc { box-shadow: inset 0 0 0 0.5px var(--stroke-2); }
.gr-nc.gr-v5 { box-shadow: inset -1.5px 0 0 var(--ink-3), inset 0 0 0 0.5px var(--stroke-2); }
.gr-nc.gr-h5 { box-shadow: inset 0 -1.5px 0 var(--ink-3), inset 0 0 0 0.5px var(--stroke-2); }
.gr-nc.gr-v5.gr-h5 { box-shadow: inset -1.5px 0 0 var(--ink-3), inset 0 -1.5px 0 var(--ink-3), inset 0 0 0 0.5px var(--stroke-2); }
.gr-nc.gr-f { background: var(--ink); }
.gr-nc.gr-x {
  background:
    linear-gradient(45deg, transparent 45%, var(--ink-3) 45%, var(--ink-3) 55%, transparent 55%) center / 42% 42% no-repeat,
    linear-gradient(-45deg, transparent 45%, var(--ink-3) 45%, var(--ink-3) 55%, transparent 55%) center / 42% 42% no-repeat;
}
.gr-nc.gr-bad { background-color: var(--ko-fill); outline: 2px solid var(--ko); outline-offset: -2px; }
.gr-nc.gr-f.gr-bad { background: var(--ko); }
.gr-won .gr-nc.gr-f { background: var(--gr-accent); }
@media (hover: hover) { .gr-nc:not(.gr-f):hover { background-color: var(--fill-2); } }

.gr-nono { --gf: 13px; }
.gr-corner { min-width: 0; }
.gr-ccl, .gr-rcl { font-size: var(--gf); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.gr-ccl { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 5px; }
.gr-rcl { display: flex; justify-content: flex-end; align-items: center; gap: 0.38em; padding-right: 7px; height: var(--gc); }
.gr-ccl { border-radius: 6px 6px 0 0; }
.gr-rcl { border-radius: 6px 0 0 6px; }
.gr-ccl.gr-done, .gr-rcl.gr-done { color: var(--ink-3); opacity: 0.55; }
.gr-ccl.gr-v5 { box-shadow: inset -1.5px 0 0 var(--ink-3); }
.gr-rcl.gr-h5 { box-shadow: inset 0 -1.5px 0 var(--ink-3); }

/* --- binario --- */
.gr-bin .gr-c { box-shadow: inset 0 0 0 0.5px var(--stroke-2); font-size: calc(var(--gc) * 0.48); font-weight: 500; color: var(--ink-2); }
.gr-bin .gr-c.gr-giv { cursor: default; font-weight: 800; color: var(--ink); }
.gr-bin .gr-c span { display: grid; place-items: center; width: 76%; height: 76%; border-radius: 30%; }
.gr-bin .gr-b0 span { background: color-mix(in srgb, #ff9f0a 20%, transparent); }
.gr-bin .gr-b1 span { background: color-mix(in srgb, var(--gr-accent) 24%, transparent); }
.gr-bin .gr-c.gr-dup span { color: var(--ko); box-shadow: inset 0 0 0 1.5px var(--ko); }
.gr-bin .gr-c.gr-bad span { color: var(--ko); background: var(--ko-fill); box-shadow: inset 0 0 0 2px var(--ko); }

/* --- campo minato --- */
.gr-ms { gap: 2px; }
.gr-ms .gr-c { border-radius: max(3px, calc(var(--gc) * 0.14)); background: var(--fill-3); font-size: calc(var(--gc) * 0.56); font-weight: 750; line-height: 1; }
@media (hover: hover) { .gr-ms .gr-c:not(.gr-o):hover { background: color-mix(in srgb, var(--ink) 18%, transparent); } }
.gr-ms .gr-c.gr-o { background: var(--fill); cursor: default; }
.gr-ms .gr-c svg { width: 62%; height: 62%; }
.gr-ms .gr-fl { color: var(--ko); }
.gr-ms .gr-wf { opacity: 0.45; }
.gr-ms .gr-mine { color: var(--ink-2); }
.gr-ms .gr-boom { background: var(--ko-fill); color: var(--ko); box-shadow: inset 0 0 0 2px var(--ko); }
.gr-n1 { color: #5e9cff; } .gr-n2 { color: var(--ok); } .gr-n3 { color: var(--ko); } .gr-n4 { color: #a07cff; }
.gr-n5 { color: #ff9f0a; } .gr-n6 { color: #2bb3c0; } .gr-n7 { color: var(--ink); } .gr-n8 { color: var(--ink-3); }
.gr-left { display: inline-flex; align-items: center; gap: 5px; font-weight: 650; font-variant-numeric: tabular-nums; color: var(--ink-2); }
.gr-left svg { width: 17px; height: 17px; color: var(--ko); }

/* --- lights out --- */
.gr-lo { gap: max(4px, calc(var(--gc) * 0.1)); }
.gr-lo .gr-c {
  border: 0; padding: 0; font: inherit; border-radius: calc(var(--gc) * 0.22); background: var(--fill-2);
  box-shadow: inset 0 0 0 1px var(--stroke); transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
}
.gr-lo .gr-c:active { transform: scale(0.94); }
.gr-lo .gr-c.gr-on { background: var(--gr-lit); box-shadow: 0 0 calc(var(--gc) * 0.35) color-mix(in srgb, var(--gr-lit) 50%, transparent); }
.gr-lo .gr-c.gr-hint::after {
  content: ''; width: 26%; height: 26%; border-radius: 50%;
  background: var(--ko); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
.gr-moves { color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
  .gr .lg-bar { gap: 6px; }
  .gr-pad { gap: 5px; }
  .gr-key { width: 40px; height: 44px; font-size: 18px; }
}