/* ============ connections ============ */
  .conn-bar{
    border-radius:12px;padding:15px 14px;margin-bottom:9px;
    text-align:center;color:var(--ink);
    animation:barflip .5s cubic-bezier(.3,.1,.3,1) both;
  }
  @keyframes barflip{0%{transform:scaleY(.2);opacity:0}100%{transform:scaleY(1);opacity:1}}
  .conn-bar h4{
    font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:15px;
    text-transform:uppercase;letter-spacing:.05em;
  }
  .conn-bar p{
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;
    letter-spacing:.06em;text-transform:uppercase;margin-top:4px;opacity:.75;
  }
  .conn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:4px}
  .conn-tile{
    border:none;border-radius:9px;
    min-height:56px;
    display:grid;place-items:center;padding:6px 2px;
    background:#e8e8ea;color:var(--ink);
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:clamp(10px,1.4vw,14px);letter-spacing:.02em;text-transform:uppercase;
    cursor:pointer;user-select:none;
    transition:background .18s,transform .1s;
  }
  .conn-tile:active{transform:scale(.94)}
  .conn-tile.sel{background:var(--pink)}
  .conn-tile.pop{animation:pop .15s ease}
  .conn-tile.wrong{animation:shake .45s ease}
  .conn-tile.out{animation:tileout .3s ease both}
  @keyframes tileout{to{transform:scale(.4);opacity:0}}
  .conn-foot{margin-top:18px;display:flex;flex-direction:column;gap:15px;align-items:center}
  .conn-dots{
    display:flex;gap:7px;align-items:center;
    font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
    letter-spacing:.16em;text-transform:uppercase;color:#9a9a9c;
  }
  .conn-dots i{width:11px;height:11px;border-radius:50%;background:var(--pink);transition:background .3s}
  .conn-dots i.off{background:#3a3a3c}
  .conn-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
  .conn-btn{
    border-radius:999px;padding:11px 18px;cursor:pointer;
    font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;
    letter-spacing:.1em;text-transform:uppercase;
    border:1.5px solid #555;background:transparent;color:#fff;
    transition:border-color .2s,color .2s,transform .1s;
  }
  .conn-btn:hover{border-color:#fff}
  .conn-btn:active{transform:scale(.95)}
  .conn-btn.primary{background:#fff;color:var(--ink);border-color:#fff}
  .conn-btn:disabled{opacity:.3;cursor:default;transform:none}
  @media (max-width:760px){
    .conn-tile{min-height:48px}
    .conn-btn{min-height:44px;padding:10px 14px;font-size:10px}
  }

  /* ============ word ladder ============ */
  .ladder{
    max-width:290px;margin:2px auto 6px;
    display:flex;flex-direction:column;
  }
  .rung{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
  .ladder .tile{
    max-height:none;aspect-ratio:1/1;
    font-size:clamp(20px,4.5vw,26px);
    border-radius:9px;
  }
  .ladder .tile.start{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  .ladder .tile.target{
    background:transparent;border-color:var(--pink);color:var(--pink);
    border-style:dashed;
  }
  .ladder .tile.match{background:var(--lime);border-color:var(--lime);color:var(--ink)}
  .ladder .tile.changed{box-shadow:0 0 0 2px var(--pink)}
  .ladder .tile.done{border-color:#3a3a3c;background:#262628;color:#cfcfd2}
  .rung-link{display:flex;justify-content:center;padding:2px 0}
  .rung-link i{width:2px;height:12px;background:#3a3a3c;border-radius:2px}
  .ladder-par{
    display:flex;justify-content:space-between;align-items:center;
    font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;
    letter-spacing:.14em;text-transform:uppercase;color:#9a9a9c;
    padding:0 4px 12px;
  }
  .ladder-par b{color:var(--pink);font-weight:600}
  @media (max-width:760px){
    .ladder{max-width:240px}
  }

  /* ============ squares (swipe word) ============ */
  .sq-current{
    height:46px;display:grid;place-items:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:27px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--lime);
  }
  .sq-current.hint{color:#5b5b5e;font-family:'IBM Plex Mono',monospace;
    font-size:11px;font-weight:600;letter-spacing:.22em}
  .sq-current.bad{color:var(--pink);animation:shake .4s ease}
  .sq-grid{
    position:relative;
    display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
    touch-action:none;user-select:none;-webkit-user-select:none;
  }
  .sq-tile{
    aspect-ratio:1/1;border-radius:11px;
    background:var(--tile-empty);border:2px solid var(--tile-line);
    display:grid;place-items:center;
    font-family:'Space Grotesk',sans-serif;font-weight:700;
    font-size:clamp(22px,5vw,30px);color:#fff;cursor:pointer;
    transition:background .12s,border-color .12s,transform .12s;
    position:relative;z-index:2;
  }
  .sq-tile.on{background:var(--lime);border-color:var(--lime);color:var(--ink);transform:scale(.92)}
  .sq-tile.on::before{
    content:'';position:absolute;inset:0;margin:auto;
    width:64%;height:64%;border-radius:50%;
    background:var(--pink);z-index:0;
    box-shadow:0 2px 10px rgba(0,0,0,.22);
  }
  .sq-tile span{position:relative;z-index:1}
  .sq-tile.hit{animation:sqhit .45s cubic-bezier(.3,1.3,.4,1)}
  @keyframes sqhit{0%{transform:scale(1.18)}100%{transform:scale(1)}}
  #sqFx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
  .sq-progress{display:flex;gap:5px;margin:16px 0 12px}
  .sq-progress i{flex:1;height:6px;border-radius:3px;background:#2c2c2e;transition:background .3s}
  .sq-progress i.got{background:var(--lime)}
  .sq-words{display:flex;flex-wrap:wrap;gap:7px;min-height:32px}
  .sq-chip{
    background:#e8e8ea;color:var(--ink);border-radius:999px;
    padding:6px 13px;
    font-family:'IBM Plex Mono',monospace;font-weight:600;font-size:11px;
    letter-spacing:.08em;text-transform:uppercase;
    animation:pop .2s ease;
  }
  @media (max-width:760px){
    .sq-current{height:40px;font-size:22px}
  }