/* Latin Twist board. Loaded after assets/css/game-base.css.
   Sizing is driven by custom properties ui.js writes onto #grid:
   --n (grid size), --cell (px), --pmc (pencil-mark columns). */

  /* ---------- the twist banner: the identity of the puzzle ---------- */
  .twist{
    display:flex; align-items:center; gap:13px;
    background:var(--surface-2); border:1px solid var(--border);
    border-radius:14px; padding:12px 14px; margin-bottom:16px;
    position:relative; overflow:hidden;
  }
  .twist::after{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:linear-gradient(180deg, var(--c1), var(--c2));
  }
  .twist-glyph{
    flex:none; width:40px; height:40px; border-radius:12px;
    display:grid; place-items:center; font-size:19px; line-height:1;
    background:var(--accent-soft); color:var(--accent);
  }
  .twist-body{min-width:0}
  .twist-top{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap}
  .twist-kicker{
    font-size:10px; text-transform:uppercase; letter-spacing:.11em;
    color:var(--muted); font-weight:650;
  }
  .twist-name{font-size:17px; font-weight:680; letter-spacing:-.02em}
  .twist-hint{margin:2px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45}

  /* ---------- board ---------- */
  .board-scroll{
    overflow-x:auto; overflow-y:hidden; padding:2px;
    margin:0 -2px; -webkit-overflow-scrolling:touch;
  }
  .grid-wrap{
    width:max-content; margin:0 auto;
    border:2px solid var(--lt-edge); border-radius:12px; overflow:hidden;
    background:var(--surface-2);
    --lt-line:var(--border); --lt-edge:var(--muted);
  }

  .lt-grid{
    --n:9; --cell:44px; --pmc:3;
    position:relative;
    display:grid; grid-template-columns:repeat(var(--n), var(--cell));
    width:calc(var(--n) * var(--cell));
    user-select:none; -webkit-user-select:none;
    touch-action:manipulation;
  }

  .lt-cell{
    position:relative; box-sizing:border-box;
    width:var(--cell); height:var(--cell); padding:0;
    border:0; border-right:1px solid var(--lt-line); border-bottom:1px solid var(--lt-line);
    background:transparent; color:var(--text);
    display:grid; place-items:center;
    font-variant-numeric:tabular-nums; line-height:1;
  }
  .lt-cell.edge-r{border-right:0}
  .lt-cell.edge-b{border-bottom:0}
  .lt-cell.box-r{border-right:2px solid var(--lt-edge)}
  .lt-cell.box-b{border-bottom:2px solid var(--lt-edge)}

  /* tint layer — keeps every highlight to theme tokens, no hard-coded colours */
  .lt-cell::before{
    content:''; position:absolute; inset:0; z-index:0;
    background:var(--accent); opacity:0; transition:opacity .12s ease;
  }
  .lt-cell.peer::before{opacity:.06}
  .lt-cell.same::before{opacity:.16}
  .lt-cell.sel::before{opacity:.24}
  .lt-cell.bad::before{background:var(--c3); opacity:.2}

  .lt-cell:focus-visible{outline:2px solid var(--accent); outline-offset:-2px; z-index:5}
  .lt-cell.bad{box-shadow:inset 0 0 0 2px var(--c3); z-index:3}
  .lt-cell.hinted{animation:ltHint 1s ease-in-out 3}
  @keyframes ltHint{
    0%,100%{box-shadow:inset 0 0 0 0 var(--ok)}
    50%    {box-shadow:inset 0 0 0 3px var(--ok)}
  }

  .lt-cell .v{
    position:relative; z-index:1;
    font-size:calc(var(--cell) * .52); font-weight:520; letter-spacing:-.02em;
    color:var(--accent);
  }
  .lt-cell.given .v{color:var(--text); font-weight:700}
  .lt-cell.bad .v{color:var(--c3)}
  .lt-cell.empty .v{display:none}

  .lt-cell .pm{
    position:relative; z-index:1;
    display:grid; grid-template-columns:repeat(var(--pmc), 1fr);
    width:100%; height:100%; place-items:center;
    font-size:calc(var(--cell) * .25); font-style:normal; color:var(--muted);
    padding:calc(var(--cell) * .06);
    box-sizing:border-box;
  }
  .lt-cell:not(.empty) .pm{display:none}
  .lt-cell .pm i{font-style:normal; opacity:0; line-height:1}
  .lt-cell .pm i.on{opacity:.85}

  /* ---------- thermometers ---------- */
  .lt-therm{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0}
  .lt-therm .track{
    fill:none; stroke:var(--muted); stroke-opacity:.34; stroke-width:.34;
    stroke-linecap:round; stroke-linejoin:round;
  }
  .lt-therm .bulb{fill:var(--muted); fill-opacity:.42}

  /* ---------- inequality signs ---------- */
  .lt-signs{position:absolute; inset:0; pointer-events:none; z-index:4}
  .lt-signs .sign{
    position:absolute; transform:translate(-50%,-50%);
    font-size:calc(var(--cell) * .34); font-weight:700; line-height:1;
    color:var(--accent); background:var(--surface-2);
    padding:1px 2px; border-radius:4px;
  }
  .lt-signs .sign.bad{color:var(--c3)}

  /* solved: settle the board */
  .lt-grid.solved .lt-cell .v{color:var(--ok)}
  .lt-grid.solved .lt-cell.given .v{color:var(--text)}
  .lt-grid.solved .lt-cell::before{opacity:0}

  /* ---------- number pad ---------- */
  .pad{
    --padc:9;
    display:grid; grid-template-columns:repeat(var(--padc), minmax(0,1fr));
    gap:6px; margin-top:16px;
  }
  .padkey{
    padding:11px 0; border-radius:11px; border:1px solid var(--border);
    background:var(--surface-2); font-size:17px; font-weight:620;
    font-variant-numeric:tabular-nums; transition:.15s;
  }
  .padkey:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
  .padkey.done{opacity:.38}
  .padkey.pencil{color:var(--muted)}

  /* ---------- side panel: the four twists ---------- */
  .twist-list{display:flex; flex-direction:column; gap:7px; margin-top:14px}
  .twist-item{
    display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted);
    border:1px solid var(--border); background:var(--surface-2);
    border-radius:10px; padding:7px 9px;
  }
  .twist-item .ti-glyph{
    flex:none; width:22px; height:22px; border-radius:7px; display:grid; place-items:center;
    background:var(--surface); font-size:12px; color:var(--muted);
  }
  .twist-item b{color:var(--text); font-weight:600}
  .twist-item.on{border-color:var(--accent); color:var(--text)}
  .twist-item.on .ti-glyph{background:var(--accent-soft); color:var(--accent)}

  @media(max-width:480px){
    .twist{padding:10px 11px; gap:10px}
    .twist-glyph{width:34px; height:34px; font-size:16px}
    .twist-name{font-size:15px}
    .pad{gap:4px}
    .padkey{padding:9px 0; font-size:15px; border-radius:9px}
  }