/* Shunt board. Loaded after assets/css/game-base.css.
   Geometry is driven by custom properties ui.js writes onto #stage:
   --cell (px), --cols, --rows, --exit (exit row index). Each block carries its
   own --bx / --by / --bl, so a move is a change of two numbers and the browser
   animates the slide. */

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

  .sz-stage{
    --cell:56px; --cols:6; --rows:6; --exit:2; --inset:4px; --lane:26px;
    display:flex; align-items:flex-start; justify-content:center;
    width:max-content; margin:0 auto;
    touch-action:none; user-select:none; -webkit-user-select:none;
  }

  /* ---------- the wall ---------- */
  .sz-frame{
    position:relative;
    width:calc(var(--cols) * var(--cell));
    height:calc(var(--rows) * var(--cell));
    border:2px solid var(--muted);
    border-radius:14px;
    background:var(--surface-2);
  }

  .sz-cells{
    position:absolute; inset:0; border-radius:12px; overflow:hidden;
    background-image:
      repeating-linear-gradient(to right,  var(--border) 0 1px, transparent 1px var(--cell)),
      repeating-linear-gradient(to bottom, var(--border) 0 1px, transparent 1px var(--cell));
    opacity:.75;
  }

  /* the break in the wall the target drives through: the card colour is
     painted over the wall, and two rails mark the opening */
  .sz-gap{
    position:absolute; right:-5px; width:9px;
    top:calc(var(--exit) * var(--cell) + 2px);
    height:calc(var(--cell) - 4px);
    background:var(--surface);
    border-top:3px solid var(--c3); border-bottom:3px solid var(--c3);
    border-radius:2px;
  }
  /* a short run-out lane pointing at the arrow */
  .sz-lane::before{
    content:''; position:absolute; left:0; width:55%;
    top:calc(var(--exit) * var(--cell) + var(--cell) / 2 + 2px);
    border-top:2px dotted var(--c3); opacity:.4;
  }

  /* ---------- the lane past the wall ---------- */
  .sz-lane{
    position:relative; flex:none;
    width:var(--lane);
    height:calc(var(--rows) * var(--cell) + 4px);
  }
  .sz-arrow{
    position:absolute; left:50%;
    top:calc(var(--exit) * var(--cell) + var(--cell) / 2 + 2px);
    transform:translate(-50%,-50%);
    font-size:calc(var(--cell) * .5); line-height:1; font-weight:700;
    color:var(--c3); opacity:.8;
  }
  .sz-stage.won .sz-arrow{opacity:1; animation:szBeckon .7s ease-in-out 2}
  @keyframes szBeckon{
    0%,100%{transform:translate(-50%,-50%)}
    50%    {transform:translate(-15%,-50%)}
  }

  /* ---------- blocks ---------- */
  .sz-blocks{position:absolute; inset:0}

  .sz-block{
    position:absolute; padding:0; margin:0;
    border-radius:11px;
    border:1px solid var(--border);
    background:var(--surface);
    box-shadow:0 1px 2px rgba(0,0,0,.18);
    transition:left .17s cubic-bezier(.2,.8,.3,1), top .17s cubic-bezier(.2,.8,.3,1);
    overflow:hidden;
    display:grid; place-items:center;
    touch-action:none;
  }
  .sz-block.h{
    left:calc(var(--bx) * var(--cell) + var(--inset));
    top:calc(var(--by) * var(--cell) + var(--inset));
    width:calc(var(--bl) * var(--cell) - 2 * var(--inset));
    height:calc(var(--cell) - 2 * var(--inset));
  }
  .sz-block.v{
    left:calc(var(--bx) * var(--cell) + var(--inset));
    top:calc(var(--by) * var(--cell) + var(--inset));
    width:calc(var(--cell) - 2 * var(--inset));
    height:calc(var(--bl) * var(--cell) - 2 * var(--inset));
  }

  /* tint layer — every colour comes from a theme token, nothing hard-coded */
  .sz-block::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--tint); opacity:.26; transition:opacity .15s ease;
  }
  /* and a ring of the same colour, so blocks read as separate pieces rather
     than one wash of tint */
  .sz-block::after{
    content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
    border:1.5px solid var(--tint); border-radius:inherit; opacity:.6;
  }
  .sz-block.k0{--tint:var(--c1)}
  .sz-block.k1{--tint:var(--c2)}
  .sz-block.k2{--tint:var(--ok)}
  .sz-block.k3{--tint:var(--muted)}
  html[data-theme="light"] .sz-block::before{opacity:.17}
  html[data-theme="light"] .sz-block::after{opacity:.5}

  /* the grip: a couple of ribs along the block's own axis, so which way a block
     can move is readable at a glance */
  .sz-grip{
    position:relative; z-index:1;
    display:grid; gap:calc(var(--cell) * .07);
    opacity:.5;
  }
  .sz-block.h .sz-grip{grid-auto-flow:row}
  .sz-block.v .sz-grip{grid-auto-flow:column}
  .sz-grip i{
    display:block; border-radius:99px; background:currentColor;
  }
  .sz-block.h .sz-grip i{width:calc(var(--cell) * .34); height:2px}
  .sz-block.v .sz-grip i{width:2px; height:calc(var(--cell) * .34)}

  .sz-block:hover{border-color:var(--accent)}
  .sz-block:hover::before{opacity:.36}
  .sz-block:focus-visible{outline:2px solid var(--accent); outline-offset:2px; z-index:6}
  .sz-block.sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft), 0 2px 8px rgba(0,0,0,.22)}
  .sz-block.sel::before{opacity:.36}
  .sz-block.stuck{animation:szNudge .3s ease}
  @keyframes szNudge{
    0%,100%{margin-left:0} 25%{margin-left:-2px} 75%{margin-left:2px}
  }
  .sz-block.dragging{
    transition:none; z-index:8;
    box-shadow:0 6px 18px -6px rgba(0,0,0,.55), 0 0 0 2px var(--accent-soft);
  }
  .sz-block.hinted{animation:szHint .55s ease-in-out 3}
  @keyframes szHint{
    0%,100%{box-shadow:0 0 0 0 var(--ok)}
    50%    {box-shadow:0 0 0 3px var(--ok)}
  }

  /* ---------- the target ---------- */
  .sz-block.target{
    --tint:var(--c3);
    border-color:var(--c3); border-width:2px;
    z-index:4;
  }
  .sz-block.target::before{opacity:.34}
  .sz-block.target::after{border-width:0}
  .sz-block.target .sz-grip{display:none}
  .sz-target-mark{
    position:relative; z-index:1;
    font-size:calc(var(--cell) * .42); line-height:1; font-weight:700;
    color:var(--c3);
  }
  .sz-block.target:hover{border-color:var(--c3)}
  .sz-block.target:hover::before{opacity:.46}
  .sz-block.target.escaped{
    transition:left .42s cubic-bezier(.5,0,.75,0), opacity .42s ease .1s;
    opacity:0;
  }

  /* ---------- searching for a puzzle ---------- */
  .sz-stage.busy{opacity:.35; transition:opacity .12s ease}

  /* ---------- side panel legend ---------- */
  .legend{gap:14px}
  .legend .lg{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--muted)}
  .legend .chip{
    flex:none; border-radius:6px; border:1px solid var(--border);
    background:var(--surface-2); position:relative; overflow:hidden;
  }
  .legend .chip::before{content:''; position:absolute; inset:0; background:var(--tint); opacity:.22}
  .legend .chip.wide{width:30px; height:15px; --tint:var(--c1)}
  .legend .chip.tall{width:15px; height:30px; --tint:var(--c2)}
  .legend .chip.goal{width:30px; height:15px; --tint:var(--c3); border-color:var(--c3)}

  @media(max-width:480px){
    .sz-stage{--lane:20px; --inset:3px}
    .sz-frame{border-radius:11px}
    .sz-block{border-radius:9px}
  }