:root{
    --bg:#0e1324; --panel:#161d34; --panel2:#1d2745; --text:#f4f7ff;
    --muted:#aeb8d4; --accent:#ffd86b; --good:#7fe0a3; --bad:#ff8b8b;
    --line:#536184; --node:#243052; --outer:#202a46;
  }
  *{box-sizing:border-box}
  body{
    margin:0; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:radial-gradient(circle at 50% 20%,#1b2850 0,transparent 34rem),var(--bg);
    color:var(--text); min-height:100vh;
  }
  .app{width:min(1100px,96vw);margin:0 auto;padding:28px 0 48px}
  header{text-align:center;margin-bottom:18px}
  h1{margin:0;font-size:clamp(2rem,5vw,3.4rem);letter-spacing:.06em}
  .subtitle{color:var(--muted);margin:.4rem auto 0;max-width:700px}
  .instructions-toggle{margin-top:12px}
  .instructions{
    max-width:760px;
    margin:14px auto 0;
    padding:14px 16px;
    text-align:left;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(255,255,255,.08);
    border-radius:14px;
    color:var(--muted);
  }
  .instructions p{margin:.5rem 0}
  .instructions strong{color:var(--text)}
  .instructions[hidden]{display:none}

  .game{position:relative;background:rgba(22,29,52,.92);border:1px solid rgba(255,255,255,.08);border-radius:24px;padding:18px;box-shadow:0 20px 60px rgba(0,0,0,.28)}
  .status{min-height:28px;text-align:center;font-weight:700;margin-bottom:8px;color:var(--accent)}
  .board-wrap{position:relative;width:100%;aspect-ratio:1.15/1;min-height:620px}
  svg.lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
  .spoke{stroke:var(--line);stroke-width:2}
  .pair-line{stroke:var(--accent);stroke-width:4;stroke-dasharray:8 8;opacity:.9}
  .node{
    position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;justify-content:center;
    text-align:center;border-radius:999px;padding:12px 16px;border:2px solid rgba(255,255,255,.14);
    background:var(--node);min-width:108px;min-height:58px;font-weight:800;letter-spacing:.04em;
    box-shadow:0 10px 22px rgba(0,0,0,.22)
  }
  .center{left:50%;top:50%;background:var(--accent);color:#1d2333;min-width:130px;min-height:76px;font-size:1.35rem;border-color:#fff0a8}
  .outer{background:var(--outer)}
  .answer-node{
    min-width:0;
    width:76px;
    background:#243052;
    padding:8px 14px;
    transition:width .16s ease, background .16s ease, border-color .16s ease;
  }
  .answer-node.solved{background:#21453a;border-color:var(--good)}
  .answer-node input{
    width:100%;
    min-width:0;
    border:0;
    outline:0;
    background:transparent;
    color:var(--text);
    text-align:center;
    font:inherit;
    text-transform:uppercase;
    padding:0 6px;
    overflow:visible;
  }
  .answer-node input::placeholder{color:#7e8bab}
  .answer-node.wrong{animation:shake .26s linear;border-color:var(--bad)}
  @keyframes shake{
    0%,100%{transform:translate(-50%,-50%) translateX(0)}
    25%{transform:translate(-50%,-50%) translateX(-5px)}
    75%{transform:translate(-50%,-50%) translateX(5px)}
  }
  .hint-btn{position:absolute;transform:translate(-50%,-50%);border:0;border-radius:999px;background:rgba(255,255,255,.09);color:var(--muted);width:30px;height:30px;cursor:pointer;font-weight:900}
  .hint-btn:hover{background:rgba(255,255,255,.15);color:var(--text)}
  .controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:16px 0 4px}
  button{font:inherit}
  .primary,.secondary{border:0;border-radius:12px;padding:11px 16px;font-weight:800;cursor:pointer}
  .primary{background:var(--accent);color:#1d2333}
  .secondary{background:#293657;color:var(--text)}
  .meta{display:none;margin-top:20px;background:var(--panel2);border-radius:18px;padding:18px}
  .meta.show{display:block}
  .meta h2{margin:0 0 6px;text-align:center}
  .meta p{color:var(--muted);text-align:center;margin-top:0}
  .answer-node.pairable{cursor:crosshair;border-color:var(--accent);touch-action:none}
  .answer-node.pairable::after{
    content:"drag";
    position:absolute;
    bottom:-22px;
    font-size:.7rem;
    letter-spacing:.06em;
    color:var(--muted);
    font-weight:700;
  }
  .answer-node.drag-source{border-color:var(--accent);background:#3b4564}
  .answer-node.paired{background:#21453a;border-color:var(--good);cursor:default}
  .answer-node.paired::after{display:none}
  .temp-line{
    stroke:var(--accent);
    stroke-width:4;
    stroke-linecap:round;
    opacity:.8;
    pointer-events:none;
  }
  .pair-results{
    display:grid;
    gap:8px;
    max-width:680px;
    margin:14px auto 0;
  }
  .pair-result{
    border:1px solid rgba(255,255,255,.1);
    background:#151d33;
    border-radius:12px;
    padding:10px 12px;
    text-align:center;
  }
  .pair-result strong{color:var(--good)}
  .pair-result span{color:var(--muted)}
  .results-modal{
    position:absolute;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    transform:translateY(-5%);
  }
  .results-modal[hidden]{display:none}
  .results-backdrop{
    position:absolute;
    inset:-6% 0 6%;
    background:rgba(8,12,24,.72);
    backdrop-filter:blur(3px);
  }
  .results-dialog{
    position:relative;
    z-index:1;
    width:min(440px,92%);
    padding:22px;
    border-radius:20px;
    background:var(--panel2);
    border:1px solid rgba(255,255,255,.12);
    text-align:center;
    box-shadow:0 18px 50px rgba(0,0,0,.38);
  }
  .results-dialog h2{margin:0 0 8px}
  .results-center{
    display:inline-block;
    margin:0 0 14px;
    padding:7px 12px;
    border-radius:999px;
    background:var(--accent);
    color:#1d2333;
    font-weight:900;
    letter-spacing:.05em;
  }
  .modal-close{
    position:absolute;
    top:10px;
    right:12px;
    border:0;
    background:transparent;
    color:var(--muted);
    font-size:1.7rem;
    line-height:1;
    cursor:pointer;
  }
  .results-stats{
    display:flex;
    justify-content:center;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:14px;
  }
  .result-stat{
    min-width:130px;
    padding:12px 16px;
    border-radius:14px;
    background:#151d33;
    border:1px solid rgba(255,255,255,.1);
  }
  .result-stat span{
    display:block;
    color:var(--muted);
    font-size:.85rem;
    margin-bottom:4px;
  }
  .result-stat strong{
    font-size:1.5rem;
    color:var(--text);
  }
  .share-preview{
    white-space:pre-line;
    color:var(--muted);
    margin:10px auto 14px;
  }
  .copy-status{
    min-height:24px;
    margin-top:8px;
    color:var(--good);
    font-weight:700;
  }
  .footer-note{text-align:center;color:var(--muted);font-size:.92rem;margin-top:14px}
  @media (max-width:760px){
    .board-wrap{min-height:690px;aspect-ratio:.84/1}
    .node{min-width:88px;min-height:50px;padding:9px 10px;font-size:.9rem}
    .center{min-width:110px;min-height:66px}
    .answer-node{min-width:0;width:68px}

  }
  .top-actions{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:12px;
  }
  .top-actions .instructions-toggle{margin-top:0}
  .puzzle-select{
    border:0;
    border-radius:12px;
    padding:11px 14px;
    background:#293657;
    color:var(--text);
    font:inherit;
    font-weight:800;
    cursor:pointer;
  }
  .load-error{
    max-width:720px;
    margin:18px auto;
    padding:16px;
    border-radius:14px;
    background:#4a2428;
    color:#ffd7d7;
    text-align:center;
  }

  .spoke-hint{
    position:absolute;
    transform:translate(-50%,-50%);
    max-width:150px;
    padding:6px 9px;
    border-radius:10px;
    background:rgba(14,19,36,.92);
    border:1px solid rgba(255,255,255,.10);
    color:var(--muted);
    font-size:.78rem;
    line-height:1.25;
    text-align:center;
    pointer-events:none;
    z-index:3;
  }
  @media (max-width:760px){
    .spoke-hint{
      max-width:118px;
      font-size:.7rem;
      padding:5px 7px;
    }
  }