/* =========================================================
   Futoshiki Player – CSS GRID "layout rivista"
   - celle numeriche = quadrati distanziati
   - simboli tra le celle (senza box, no border, no bg)
   ========================================================= */

:root{
  --futo-cell: 78px;     /* lato quadrato numeri */
  --futo-gap: 22px;      /* spazio tra quadrati */
  --futo-num: 38px;      /* font numeri */
  --futo-rel: 30px;      /* font simboli */
  --futo-border: 3px;
  --futo-border-col: #666;
  --futo-given-bg: #e9e9e9;
  --futo-empty-bg: #fff;
  --futo-hover-bg: #f7fbff;
}

/* wrapper */
#boardWrap{
  overflow: auto;
  padding: 8px 0;
}
/* Celle suggerite (hint): bordo colorato + leggero highlight */
.futo-cell.hint {
  box-shadow: inset 0 0 0 3px #2a7bd8;
   background: #eef5ff;
}
.futo-cell.hint input {
  color: #111;
}
/* griglia */
.futo-grid{
  display: grid;
  width: max-content; /* NON stretch */
  margin: 0 auto;
  align-items: center;
  justify-items: center;
}

/* reset base per gli item della griglia */
.futo-item{
  box-sizing: border-box;
}

/* ============ CELLE NUMERICHE (quadrati) ============ */
.futo-cell{
  width: var(--futo-cell);
  height: var(--futo-cell);
  background: var(--futo-empty-bg);
  border: var(--futo-border) solid var(--futo-border-col);
  display: grid;
  place-items: center;
}

.futo-cell.given{
  background: var(--futo-given-bg);
}

.futo-cell:not(.given):hover{
  background: var(--futo-hover-bg);
}

/* input pieno */
.futo-cell input{
  width: 100%;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  text-align: center;
  font-size: var(--futo-num);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  margin: 0;
  color: #111;
}

.futo-cell.given input{
  pointer-events: none;
}

/* active / invalid */
.futo-cell.active{
  box-shadow: inset 0 0 0 3px #1a4;
}

.futo-cell.invalid{
  box-shadow: inset 0 0 0 4px #b00020;
}

.futo-cell.invalid input{
  color: #b00020;
}

/* ============ SIMBOLI (senza box) ============ */
/* ============ SIMBOLI (tra le celle) ============ */

/* regole comuni a tutti i simboli */
.futo-hrel,
.futo-vrel {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #111;
  font-size: var(--futo-rel);   /* stessa size per orizzontali e verticali */
  font-weight: 400;             /* NON bold */
  line-height: 1;
}

/* orizzontali: celle “in mezzo” senza bordo, più strette */
.futo-hrel {
  width: 24px !important;
  min-width: 24px !important;
  height: var(--futo-cell) !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* verticali: celle “in mezzo” senza bordo, più basse */
.futo-vrel {
  width: var(--futo-cell) !important;
  height: 24px !important;
  min-height: 24px !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* spazio incrocio (odd/odd): NON serve renderarlo, ma se c'è non deve vedersi */
.futo-x{
  width: var(--futo-gap);
  height: var(--futo-gap);
  background: transparent !important;
  border: 0 !important;
}