/* Nonogram Nights board. Loaded after assets/css/game-base.css.
   Sizing is driven by custom properties that ui.js writes onto #board:
   --cell, --w, --h, --rcmax, --ccmax, --slot, --clue-font. */

  .board-scroll{
    overflow-x:auto; overflow-y:hidden; padding:2px 2px 6px;
    margin:0 -2px; -webkit-overflow-scrolling:touch;
  }

  #board{
    --cell:28px; --w:10; --h:10; --rcmax:3; --ccmax:3; --slot:20px; --clue-font:12px;
    display:grid;
    grid-template-columns:auto auto;
    grid-template-rows:auto auto;
    gap:8px;
    width:max-content;
    margin:0 auto;
    user-select:none; -webkit-user-select:none;
  }

  /* ---------- clue gutters ---------- */
  .corner{
    display:grid; place-items:end center; padding-bottom:2px;
    min-width:calc(var(--rcmax) * var(--slot));
    min-height:calc(var(--ccmax) * var(--slot));
  }
  .corner-size{
    font-size:11px; font-weight:650; color:var(--muted);
    letter-spacing:.04em; font-variant-numeric:tabular-nums; white-space:nowrap;
  }

  .col-clues{
    display:grid;
    grid-template-columns:repeat(var(--w), var(--cell));
    column-gap:2px;
    align-items:end;
  }
  .cc{
    display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
    min-height:calc(var(--ccmax) * var(--slot));
    border-radius:6px 6px 0 0; transition:background-color .12s ease;
  }

  .row-clues{
    display:grid;
    grid-template-rows:repeat(var(--h), var(--cell));
    row-gap:2px;
  }
  .rc{
    display:flex; align-items:center; justify-content:flex-end;
    height:var(--cell); min-width:calc(var(--rcmax) * var(--slot));
    border-radius:6px 0 0 6px; transition:background-color .12s ease;
  }

  .cc span, .rc span{
    display:grid; place-items:center;
    width:var(--slot); height:var(--slot);
    font-size:var(--clue-font); font-weight:620; line-height:1;
    color:var(--text); font-variant-numeric:tabular-nums;
    transition:opacity .18s ease, color .18s ease;
  }
  .cc span.zero, .rc span.zero{ color:var(--muted); font-weight:500 }

  /* a line whose marks already match its clue */
  .cc.done span, .rc.done span{ opacity:.3; text-decoration:line-through }
  .cc.done span.zero, .rc.done span.zero{ text-decoration:none }

  /* scanning highlight */
  .cc.hl, .rc.hl{ background-color:var(--accent-soft) }
  .cc.hl span, .rc.hl span{ color:var(--accent) }

  /* fifth-line rhythm in the gutters */
  .cc.g5, .rc.g5{ position:relative }
  .cc.g5::before{
    content:''; position:absolute; left:-2px; top:18%; bottom:0; width:2px;
    background:var(--border);
  }
  .rc.g5::before{
    content:''; position:absolute; top:-2px; right:0; left:18%; height:2px;
    background:var(--border);
  }

  /* ---------- the grid ---------- */
  .cells{
    display:grid;
    grid-template-columns:repeat(var(--w), var(--cell));
    grid-auto-rows:var(--cell);
    gap:2px;
    touch-action:none;
  }

  .cell{
    position:relative; width:var(--cell); height:var(--cell);
    padding:0; border:0; border-radius:max(2px, calc(var(--cell) * .13));
    background-color:var(--surface-2);
    background-repeat:no-repeat; background-position:center;
    transition:background-color .12s ease, transform .1s ease;
  }
  .cell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; z-index:3 }
  .cell.hl{ background-color:var(--accent-soft) }

  /* filled */
  .cell[data-m="1"]{
    background-image:linear-gradient(140deg, var(--c1), var(--c2));
    box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  }
  /* crossed out — drawn with gradients so no extra element is needed */
  .cell[data-m="2"]{
    background-image:
      linear-gradient(45deg, transparent 43%, var(--muted) 43%, var(--muted) 57%, transparent 57%),
      linear-gradient(-45deg, transparent 43%, var(--muted) 43%, var(--muted) 57%, transparent 57%);
    background-size:52% 52%, 52% 52%;
    opacity:.9;
  }

  .cell.hint{ animation:nnHint 1s ease-in-out 3 }
  @keyframes nnHint{
    0%,100%{ box-shadow:0 0 0 0 var(--accent-soft) }
    50%    { box-shadow:0 0 0 6px var(--accent-soft) }
  }

  /* fifth-line rhythm inside the grid */
  .cell.g5c::before{
    content:''; position:absolute; left:-2px; top:-1px; bottom:-1px; width:2px;
    background:var(--border); pointer-events:none;
  }
  .cell.g5r::after{
    content:''; position:absolute; top:-2px; left:-1px; right:-1px; height:2px;
    background:var(--border); pointer-events:none;
  }

  /* solved: settle the picture, drop the scaffolding */
  .cells.solved .cell[data-m="2"]{ opacity:.25 }
  .cells.solved .cell.g5c::before, .cells.solved .cell.g5r::after{ opacity:0 }

  /* ---------- legend ---------- */
  .legend .swatch.nn-fill{ background-image:linear-gradient(140deg, var(--c1), var(--c2)) }
  .legend .swatch.nn-cross{
    background-color:var(--surface-2); border:1px solid var(--border);
    background-image:
      linear-gradient(45deg, transparent 40%, var(--muted) 40%, var(--muted) 60%, transparent 60%),
      linear-gradient(-45deg, transparent 40%, var(--muted) 40%, var(--muted) 60%, transparent 60%);
    background-size:64% 64%; background-repeat:no-repeat; background-position:center;
  }
  .legend .swatch.nn-empty{ background-color:var(--surface-2); border:1px solid var(--border) }

  /* ---------- win-sheet thumbnail of the finished picture ---------- */
  .picture{
    --pw:10; --pcell:9px;
    display:grid; grid-template-columns:repeat(var(--pw), var(--pcell));
    grid-auto-rows:var(--pcell); gap:1px; justify-content:center;
    margin:0 auto 18px; padding:10px;
    background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
    width:max-content; max-width:100%; overflow:hidden;
  }
  .picture i{ display:block; border-radius:1px; background:transparent }
  .picture i.on{ background-image:linear-gradient(140deg, var(--c1), var(--c2)) }

  @media(max-width:480px){
    #board{ gap:6px }
  }