/* Zatáčka (curve game) — loaded alongside crystal.css, which already
   defines :root palette, html/body basics, #backlink and #corner.
   Only curve-specific classes plus the two-game toggle live here. */

/* held-down controls (Zatáčka's turn buttons especially) must never trigger
   the mobile "select this text" / magnifier loupe gesture on a long press */
body{
  touch-action:none;overscroll-behavior:none;
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
}

#trail{position:fixed;inset:0;z-index:1;}
#heads{position:fixed;inset:0;z-index:2;}

#scoreboard{
  position:fixed;top:14px;left:50%;z-index:6;
  transform:translateX(-50%);
  display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;padding:7px 16px;
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.78rem;letter-spacing:.02em;
  pointer-events:none;
}
#scoreList .sep{color:var(--muted);margin:0 2px;}
#scoreboard .round{color:var(--muted);margin-left:6px;}

/* centered (not edge-pinned) so the buttons clear both the top-left
   "back to pavelsramek.com" link and the score pill above them — moved
   here 11. 9. 2026, they used to sit flush against the screen edges */
.ctrl-cluster{
  position:fixed;left:0;right:0;
  display:flex;justify-content:center;align-items:center;
  gap:64px;z-index:5;
  pointer-events:none;
}
.ctrl-cluster.p1{top:66px;} /* clears the score pill (top:14px) above it */
.ctrl-cluster.p2{bottom:16px;transform:rotate(180deg);}

.ctrl-btn{
  pointer-events:auto;
  width:88px;height:88px;border-radius:24px; /* bigger tap target, 11. 9. 2026 (was 72px) */
  display:flex;align-items:center;justify-content:center;
  font-size:1.8rem;color:#fff;border:none;
  -webkit-tap-highlight-color:transparent;
  touch-action:none;cursor:pointer;
  transition:transform .1s ease, filter .1s ease;
}
.p1 .ctrl-btn{background:rgba(217,92,134,0.22);border:2px solid rgba(217,92,134,0.55);}
.p2 .ctrl-btn{background:rgba(255,201,60,0.22);border:2px solid rgba(255,201,60,0.55);}
.ctrl-btn.active{filter:brightness(1.5);transform:scale(0.92);}

/* desktop (mouse/keyboard) roster + "add player" panel — hidden entirely
   on touch devices, where the on-screen buttons above are used instead */
#curvePlayers{
  display:none;
  position:fixed;bottom:22px;left:22px;z-index:10;
  font-family:'SF Mono','JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;
  font-size:.72rem;letter-spacing:.02em;color:var(--muted);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:12px;padding:11px 13px;
  backdrop-filter:blur(6px);
  min-width:168px;
  flex-direction:column;gap:7px;
}
#curveRoot.ps-desktop .ctrl-cluster{display:none;}
#curveRoot.ps-desktop #curvePlayers{display:flex;}
#curvePlayersList{display:flex;flex-direction:column;gap:4px;}
.curve-player-row{display:flex;align-items:center;gap:7px;color:#fff;}
.curve-player-row .dot{width:9px;height:9px;border-radius:50%;flex:none;}
.add-player-btn{
  margin-top:2px;
  font-family:inherit;font-size:.72rem;font-weight:600;letter-spacing:.02em;
  color:#fff;border:none;border-radius:999px;cursor:pointer;
  padding:9px 12px;
  background:linear-gradient(135deg, var(--purple), var(--pink));
  transition:transform .1s ease, opacity .1s ease;
}
.add-player-btn:active{transform:scale(0.96);}
.add-player-btn:disabled{opacity:.45;cursor:default;background:rgba(255,255,255,0.12);}

#startHint .desktop-hint{display:none;}
#curveRoot.ps-desktop #startHint .desktop-hint{
  display:block;color:var(--muted);font-size:.85rem;margin:2px 0 0;max-width:300px;line-height:1.5;
}

#startHint{
  position:fixed;inset:0;z-index:8;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:0 30px;
  background:rgba(11,14,22,0.74);
  transition:opacity .3s ease;
}
#startHint.hidden{opacity:0;pointer-events:none;}
#startHint h1{font-size:1.25rem;margin:0;}
#startHint p{color:var(--muted);font-size:.85rem;margin:0;max-width:300px;line-height:1.5;}
#startHint .tap{
  margin-top:16px;font-weight:700;letter-spacing:.03em;font-size:.92rem;
  padding:13px 28px;border-radius:999px;cursor:pointer;
  background:linear-gradient(135deg, var(--purple), var(--pink));
}

#banner{
  position:fixed;inset:0;z-index:7;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;text-align:center;padding:0 30px;
  background:rgba(11,14,22,0.66);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
#banner.show{opacity:1;pointer-events:auto;}
#banner .title{font-size:1.4rem;font-weight:700;}
#banner .sub{color:var(--muted);font-size:.84rem;}

/* ---------- shared: switching between the two showcase pieces ---------- */
.game-hidden{display:none;}

.game-switch{
  position:fixed;right:14px;top:50%;z-index:9;
  transform:translateY(-50%);
  background:linear-gradient(135deg, var(--purple), var(--pink));
  color:#fff;border:none;border-radius:999px;
  padding:12px 18px;font-size:.84rem;font-weight:600;letter-spacing:.02em;
  cursor:pointer;white-space:nowrap;
  box-shadow:0 14px 30px -10px rgba(0,0,0,0.55);
  transition:transform .15s ease;
}
.game-switch:active{transform:translateY(-50%) scale(0.94);}

/* Mobilní poloha přepínače: 540px, ne 420px — dnešní velké telefony mají
   430 až 440 CSS px šířky (iPhone Pro Max a spol.) a při původním prahu na ně
   platilo desktopové top:50%, tzn. pill ležel přesně přes hrací pole
   a instrukční text uprostřed obrazovky. */
@media (max-width:540px){
  .game-switch{font-size:.76rem;padding:10px 14px;top:155px;}
}

@media (prefers-reduced-motion: reduce){
  .ctrl-btn{transition:none;}
  .game-switch{transition:none;}
}