/* Hexflow board. Loaded after assets/css/game-base.css.

   Geometry is one number: --hw, the width of a hexagon in pixels, written onto
   #stage by ui.js. Everything else falls out of it.

   A pointy-top hexagon of width W is W * 2/sqrt(3) tall, and rows overlap by a
   quarter of that height, so each row steps down by three quarters. Odd rows
   sit half a hexagon further right — that is the "odd-r" offset, and it is why
   every tile carries --odd as well as --r and --c.

   Colours come only from the shared theme tokens, so both themes track. */

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

  .hx-stage{
    --hw:56px;
    --hh:calc(var(--hw) * 1.15470054);
    --rowstep:calc(var(--hh) * 0.75);
    --cols:7; --rows:7;
    position:relative;
    width:calc(var(--cols) * var(--hw) + var(--hw) / 2);
    height:calc((var(--rows) - 1) * var(--rowstep) + var(--hh));
    margin:0 auto;
    touch-action:manipulation;
    user-select:none; -webkit-user-select:none;
  }

  /* ---------- a tile ----------
     The clip-path is doing two jobs: it draws the hexagon, and it makes the
     button's hit area a real hexagon so neighbouring tiles never steal each
     other's taps at the corners. It also trims each pipe stub exactly at the
     tile edge, which is what lets two stubs meet flush across a join. */
  .hx{
    position:absolute; padding:0; margin:0; border:0; background:transparent;
    left:calc(var(--c) * var(--hw) + var(--odd) * var(--hw) / 2);
    top:calc(var(--r) * var(--rowstep));
    width:var(--hw); height:var(--hh);
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    -webkit-tap-highlight-color:transparent;
    color:var(--text);
  }
  .hx svg{position:absolute; inset:0; width:100%; height:100%; display:block; pointer-events:none}

  /* the rotating layer — --spin is an unbounded integer, so a tile always
     turns the way it was pushed rather than snapping the short way round */
  .hx .art{
    transform:rotate(calc(var(--spin) * 60deg));
    transform-origin:50% 50%;
    transition:transform .22s cubic-bezier(.2,.8,.3,1);
  }
  .hx-stage.instant .art{transition:none}

  /* ---------- the cell beneath ---------- */
  .hx .plate{
    fill:var(--surface-2); stroke:var(--border); stroke-width:2.5;
    transition:fill .2s ease, stroke .2s ease, stroke-width .12s ease;
  }
  .hx:hover .plate{fill:var(--surface); stroke:var(--accent)}
  .hx:focus{outline:none}
  .hx:focus-visible .plate{stroke:var(--accent); stroke-width:7}
  .hx.locked .plate{stroke:var(--ok); stroke-width:4; stroke-dasharray:11 7}

  /* ---------- pipes ---------- */
  .hx .glow{
    stroke:var(--c2); stroke-width:26; stroke-linecap:round; fill:none;
    opacity:0; transition:opacity .28s ease;
  }
  .hx .pipe{
    stroke:var(--muted); stroke-width:13; stroke-linecap:round; fill:none;
    opacity:.55; transition:stroke .28s ease, opacity .28s ease;
  }
  .hx .hub{fill:var(--muted); opacity:.55; transition:fill .28s ease, opacity .28s ease}

  /* endpoint tiles — one stub only, so they read as things to be plugged in */
  .hx .term{
    fill:var(--surface-2); stroke:var(--muted); stroke-width:6;
    opacity:.62; transition:stroke .28s ease, fill .28s ease, opacity .28s ease;
  }
  .hx .pip{fill:var(--muted); opacity:.62; transition:fill .28s ease, opacity .28s ease}

  /* ---------- powered ---------- */
  .hx.lit .pipe{stroke:var(--c1); opacity:1}
  .hx.lit .hub{fill:var(--c1); opacity:1}
  .hx.lit .glow{opacity:.17}
  .hx.lit .term{stroke:var(--c1); fill:var(--surface); opacity:1}
  .hx.lit .pip{fill:var(--c1); opacity:1}
  .hx.lit .plate{fill:var(--surface)}
  html[data-theme="light"] .hx.lit .glow{opacity:.13}

  /* ---------- the source ---------- */
  .hx.src .pipe{stroke:var(--c3); opacity:1}
  .hx.src .glow{stroke:var(--c3); opacity:.2}
  .hx.src .core{fill:var(--surface); stroke:var(--c3); stroke-width:7}
  .hx.src .pip{fill:var(--c3); opacity:1}
  .hx.src .plate{stroke:var(--c3)}
  .hx.src .ring{
    fill:none; stroke:var(--c3); stroke-width:3; opacity:.5;
    transform-origin:50% 50%;
    animation:hxPulse 2.6s ease-in-out infinite;
  }
  @keyframes hxPulse{
    0%,100%{opacity:.42; transform:scale(1)}
    50%    {opacity:.1;  transform:scale(1.22)}
  }

  /* ---------- feedback ---------- */
  .hx.nudge{animation:hxNudge .32s ease}
  @keyframes hxNudge{
    0%,100%{filter:none} 50%{filter:brightness(1.5)}
  }
  .hx.hinted .plate{animation:hxHint .5s ease-in-out 3}
  @keyframes hxHint{
    0%,100%{stroke:var(--ok); stroke-width:3}
    50%    {stroke:var(--ok); stroke-width:8}
  }

  .hx-stage.won .hx .pipe{stroke:var(--ok)}
  .hx-stage.won .hx .hub,
  .hx-stage.won .hx .pip{fill:var(--ok)}
  .hx-stage.won .hx .term{stroke:var(--ok)}
  .hx-stage.won .hx .glow{stroke:var(--ok); opacity:.22}
  .hx-stage.won .hx.src .pipe{stroke:var(--c3)}
  .hx-stage.won .hx .plate{stroke:var(--ok)}
  .hx-stage.busy{opacity:.35; transition:opacity .12s ease}

  /* ---------- flow meter ---------- */
  .hx-flow{margin-top:16px}
  .hx-track{
    height:6px; border-radius:99px; background:var(--surface-2);
    border:1px solid var(--border); overflow:hidden;
  }
  .hx-fill{
    height:100%; width:0%; border-radius:99px;
    background:linear-gradient(90deg, var(--c1), var(--c2));
    transition:width .3s cubic-bezier(.2,.8,.3,1);
  }
  .hx-fill.done{background:var(--ok)}
  .hx-flow-text{
    display:flex; justify-content:space-between; gap:10px;
    margin-top:7px; font-size:12px; color:var(--muted);
    font-variant-numeric:tabular-nums;
  }
  .hx-flow-text span:last-child{color:var(--c3)}
  .hx-flow-text span.clear{color:var(--ok)}

  /* ---------- side-panel legend ---------- */
  .legend{
    flex-direction:column; align-items:flex-start; gap:9px;
    margin-top:16px; padding-top:14px; border-top:1px solid var(--border);
  }
  .legend .lg{display:flex; align-items:center; gap:9px; font-size:12px; color:var(--muted)}
  .legend .hexchip{
    flex:none; width:20px; height:23px;
    clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:var(--surface-2); position:relative;
  }
  .legend .hexchip::after{
    content:''; position:absolute; left:50%; top:50%; width:70%; height:4px;
    transform:translate(-50%,-50%); border-radius:99px; background:var(--muted); opacity:.55;
  }
  .legend .hexchip.on{background:var(--surface)}
  .legend .hexchip.on::after{background:var(--c1); opacity:1}
  .legend .hexchip.source::after{background:var(--c3); opacity:1}
  .legend .hexchip.lock{box-shadow:inset 0 0 0 2px var(--ok)}
  .legend .hexchip.lock::after{background:var(--ok); opacity:.8}

  @media(max-width:480px){
    .hx .plate{stroke-width:2}
    .hx-flow-text{font-size:11.5px}
  }

  @media(prefers-reduced-motion:reduce){
    .hx .art{transition:none}
    .hx .ring{animation:none}
    .hx.hinted .plate{animation:none; stroke:var(--ok); stroke-width:6}
    .hx-fill{transition:none}
  }