/* ============================================================
   Punkte verbinden – Sehnen-Duell
   ============================================================ */
:root{
  --bg:#080c1a;
  --bg-2:#0e1430;
  --panel:rgba(255,255,255,.045);
  --panel-brd:rgba(255,255,255,.10);
  --ink:#eef2ff;
  --ink-dim:#9aa5c8;
  --ink-faint:#69739a;
  --p1:#22d3ee;
  --p1-soft:rgba(34,211,238,.20);
  --p2:#fb7185;
  --p2-soft:rgba(251,113,133,.20);
  --accent:#a78bfa;
  --bad:#ef4444;
  --radius:16px;
  --shadow:0 18px 50px rgba(0,0,0,.55);
  color-scheme:dark;
}

*{box-sizing:border-box}
[hidden]{display:none !important}

html,body{height:100%}
body{
  margin:0;
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1100px 700px at 78% -10%, #1b2560 0%, transparent 62%),
    radial-gradient(900px 620px at 8% 104%, #2a1447 0%, transparent 60%),
    var(--bg);
  min-height:100dvh;
  display:flex;flex-direction:column;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px clamp(14px,4vw,32px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand-mark{width:34px;height:34px;flex:none}
.brand-text{font-size:1.05rem;letter-spacing:.2px;font-weight:400;opacity:.92}
.brand-text b{font-weight:700}

.lang{display:flex;gap:6px;background:var(--panel);border:1px solid var(--panel-brd);border-radius:999px;padding:4px}
.lang-btn{
  width:34px;height:24px;padding:0;border:0;border-radius:6px;cursor:pointer;
  background:transparent;opacity:.42;transition:opacity .18s ease,transform .18s ease;
  display:grid;place-items:center;
}
.lang-btn svg{width:26px;height:16px;border-radius:3px;display:block;box-shadow:0 1px 3px rgba(0,0,0,.5)}
.lang-btn:hover{opacity:.8;transform:translateY(-1px)}
.lang-btn.active{opacity:1;background:rgba(255,255,255,.10)}

/* ---------- Layout ---------- */
.layout{
  flex:1;
  width:min(1180px,100%);
  margin:0 auto;
  padding:4px clamp(14px,4vw,32px) 24px;
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);
  gap:clamp(18px,3vw,34px);
  align-items:start;
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr}
}

/* ---------- Turnbar ---------- */
.stage{display:flex;flex-direction:column;gap:14px;min-width:0}
.turnbar{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  background:var(--panel);border:1px solid var(--panel-brd);
  font-size:.9rem;min-width:0;
  transition:border-color .25s ease,background .25s ease,box-shadow .25s ease;
}
#chip1{justify-self:start}
#chip2{justify-self:end}
.chip-dot{width:10px;height:10px;border-radius:50%;flex:none}
#chip1 .chip-dot{background:var(--p1);box-shadow:0 0 10px var(--p1)}
#chip2 .chip-dot{background:var(--p2);box-shadow:0 0 10px var(--p2)}
.chip-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-score{
  font-variant-numeric:tabular-nums;font-weight:700;
  background:rgba(255,255,255,.08);border-radius:8px;padding:1px 8px;
}
#chip1.turn{border-color:var(--p1);background:var(--p1-soft);box-shadow:0 0 0 1px var(--p1-soft),0 6px 22px rgba(34,211,238,.16)}
#chip2.turn{border-color:var(--p2);background:var(--p2-soft);box-shadow:0 0 0 1px var(--p2-soft),0 6px 22px rgba(251,113,133,.16)}
.status{
  font-size:.86rem;color:var(--ink-dim);text-align:center;
  padding:0 6px;min-height:1.2em;
}
.status b{color:var(--ink);font-weight:600}

/* ---------- Board ---------- */
.boardwrap{position:relative;width:100%;aspect-ratio:1/1;max-width:min(74vh,620px);margin:0 auto}
#board{width:100%;height:100%;display:block;touch-action:manipulation;overflow:visible}

.ring{fill:none;stroke:rgba(255,255,255,.13);stroke-width:1.5}
.ring-glow{fill:url(#ringFill)}

.chord{stroke-linecap:round;stroke-width:5;opacity:.95;filter:url(#soft)}
.chord.p1{stroke:var(--p1)}
.chord.p2{stroke:var(--p2)}
.chord.last{stroke-width:6.5}
@keyframes chordDraw{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
.chord.draw{animation:chordDraw .38s cubic-bezier(.4,0,.2,1)}

#preview{stroke-width:4;stroke-linecap:round;stroke-dasharray:9 9;opacity:.75;pointer-events:none}
#preview.ok.p1{stroke:var(--p1)}
#preview.ok.p2{stroke:var(--p2)}
#preview.bad{stroke:var(--bad);opacity:.6}

.hintline{stroke:var(--accent);stroke-width:5;stroke-linecap:round;opacity:0;pointer-events:none}
.hintline.show{animation:hintPulse 2.4s ease-out forwards}
@keyframes hintPulse{
  0%{opacity:0}12%{opacity:.95}70%{opacity:.95}100%{opacity:0}
}

.pt{cursor:pointer;outline:none}
.pt .hit{fill:transparent}
.pt .core{fill:#dbe3ff;transition:fill .2s ease,r .2s ease}
.pt .halo{fill:none;stroke:transparent;stroke-width:2.5;transition:stroke .2s ease,r .2s ease,opacity .2s ease;opacity:0}
.pt:hover .core,.pt:focus-visible .core{r:11}
.pt:focus-visible .halo{opacity:.8;stroke:var(--accent);r:17}

.pt.free .core{fill:#e8edff}
.pt.used{cursor:default}
.pt.used .core{fill:#3a4269;r:6}
.pt.used.by1 .core{fill:#0e4a56}
.pt.used.by2 .core{fill:#5a1f2c}
.pt.used .halo{opacity:1;r:9;stroke-width:2}
.pt.used.by1 .halo{stroke:var(--p1);opacity:.75}
.pt.used.by2 .halo{stroke:var(--p2);opacity:.75}

.pt.sel .core{fill:#fff;r:12}
.pt.sel .halo{opacity:1;r:18;stroke:var(--accent);animation:selPulse 1.5s ease-in-out infinite}
@keyframes selPulse{0%,100%{r:16;opacity:.9}50%{r:20;opacity:.45}}

.pt.target .core{r:11}
.pt.target .halo{opacity:.55;r:14;stroke:rgba(255,255,255,.5);stroke-dasharray:3 4}
.pt.dim .core{fill:#4b5478;r:7}
.pt.blocked .core{fill:#4b5478}

.board-locked .pt{cursor:default}

.shake{animation:shake .32s ease}
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-7px)}40%{transform:translateX(6px)}
  60%{transform:translateX(-4px)}80%{transform:translateX(3px)}
}

/* ---------- Overlay ---------- */
.overlay{
  position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(60% 60% at 50% 50%,rgba(8,12,26,.82) 0%,rgba(8,12,26,.94) 100%);
  border-radius:24px;backdrop-filter:blur(3px);
  animation:fadeIn .3s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.overlay-card{text-align:center;padding:22px;max-width:88%}
.overlay-ring{
  width:74px;height:74px;margin:0 auto 14px;border-radius:50%;
  border:3px solid var(--p1);
  box-shadow:0 0 34px var(--p1);
  animation:ringIn .55s cubic-bezier(.2,1.3,.4,1) both;
}
.overlay-ring.lose{border-color:var(--p2);box-shadow:0 0 34px var(--p2)}
@keyframes ringIn{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.overlay h2{margin:0 0 6px;font-size:1.5rem;letter-spacing:-.01em}
.overlay p{margin:0 0 18px;color:var(--ink-dim);font-size:.9rem}
.overlay-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

/* ---------- Buttons ---------- */
.actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.btn{
  appearance:none;border:1px solid var(--panel-brd);background:var(--panel);
  color:var(--ink);font:inherit;font-size:.88rem;
  padding:10px 16px;border-radius:11px;cursor:pointer;
  transition:transform .15s ease,background .2s ease,border-color .2s ease,opacity .2s ease;
}
.btn:hover:not(:disabled){background:rgba(255,255,255,.1);transform:translateY(-1px)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primary{
  background:linear-gradient(180deg,#3ddcf0,#1eaec7);
  border-color:transparent;color:#04222a;font-weight:650;
  box-shadow:0 8px 22px rgba(34,211,238,.25);
}
.btn.primary:hover{background:linear-gradient(180deg,#57e5f7,#25bad4)}
.btn.ghost{background:transparent}
.btn.icon{padding:10px 12px;display:grid;place-items:center}
.btn.icon svg{width:18px;height:18px;display:block}
.btn.icon .ico-off{display:none}
.btn.icon[aria-pressed="false"] .ico-on{display:none}
.btn.icon[aria-pressed="false"] .ico-off{display:block}
.btn.icon[aria-pressed="false"]{color:var(--ink-faint)}

.toast{
  margin:0;text-align:center;font-size:.85rem;color:var(--accent);
  min-height:1.2em;animation:fadeIn .2s ease;
}

/* ---------- Panel ---------- */
.panel{
  background:var(--panel);border:1px solid var(--panel-brd);
  border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:18px;
  backdrop-filter:blur(8px);
}
.field{display:flex;flex-direction:column;gap:9px}
.field-label{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-faint);
}
.field-label output{
  color:var(--ink);font-size:.95rem;font-weight:700;letter-spacing:0;
  font-variant-numeric:tabular-nums;text-transform:none;
}
.seg{
  display:flex;gap:4px;background:rgba(0,0,0,.28);
  border:1px solid var(--panel-brd);border-radius:11px;padding:4px;
}
.seg button{
  flex:1;appearance:none;border:0;background:transparent;color:var(--ink-dim);
  font:inherit;font-size:.82rem;padding:8px 6px;border-radius:8px;cursor:pointer;
  transition:background .2s ease,color .2s ease;white-space:nowrap;
}
.seg button:hover{color:var(--ink)}
.seg button.active{background:rgba(255,255,255,.13);color:var(--ink);font-weight:600}

input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:26px;background:transparent;cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{
  height:6px;border-radius:99px;background:linear-gradient(90deg,var(--p1),var(--accent));
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:#fff;border:3px solid #0e1430;margin-top:-7px;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-track{height:6px;border-radius:99px;background:linear-gradient(90deg,var(--p1),var(--accent))}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border:3px solid #0e1430;border-radius:50%;background:#fff}

.hint-text{margin:0;font-size:.78rem;line-height:1.5;color:var(--ink-faint)}
.hint-text b{color:var(--ink-dim);font-weight:600}

.rules{border-top:1px solid var(--panel-brd);padding-top:14px}
.rules summary{
  cursor:pointer;font-size:.86rem;font-weight:600;list-style:none;
  display:flex;align-items:center;gap:8px;color:var(--ink);
}
.rules summary::-webkit-details-marker{display:none}
.rules summary::before{content:"▸";color:var(--accent);transition:transform .2s ease}
.rules[open] summary::before{transform:rotate(90deg)}
.rules ol{margin:12px 0 10px;padding-left:20px;font-size:.83rem;line-height:1.65;color:var(--ink-dim)}
.rules li{margin-bottom:4px}

.stats{margin:0;font-size:.78rem;color:var(--ink-faint);text-align:center}
.linkbtn{
  background:none;border:0;color:var(--ink-faint);font:inherit;font-size:.74rem;
  text-decoration:underline;cursor:pointer;padding:0;align-self:center;
}
.linkbtn:hover{color:var(--ink-dim)}

/* ---------- Footer ---------- */
.foot{
  padding:16px clamp(14px,4vw,32px) 26px;
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;
  font-size:.76rem;color:var(--ink-faint);
}
.foot a{color:var(--ink-dim);text-decoration:none}
.foot a:hover{text-decoration:underline}

@media (max-width:640px){
  .turnbar{grid-template-columns:1fr 1fr;row-gap:8px}
  #chip1{grid-column:1;grid-row:1}
  #chip2{grid-column:2;grid-row:1}
  .status{grid-column:1 / -1;grid-row:2}
  .boardwrap{max-width:min(70vh,560px)}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}