/* ============================================================
   Lineup — Styles
   Clean & modern: soft pastels, rounded, calm and friendly.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-1: oklch(0.985 0.012 90);
  --bg-2: oklch(0.955 0.025 70);
  --card: oklch(0.995 0.004 95);
  --card-2: oklch(0.975 0.008 90);

  /* Ink */
  --ink: oklch(0.34 0.035 265);
  --ink-soft: oklch(0.56 0.03 265);
  --ink-faint: oklch(0.72 0.02 265);
  --line: oklch(0.91 0.012 265);

  /* Players (classic red vs yellow, softened) */
  --red: oklch(0.685 0.17 25);
  --red-deep: oklch(0.585 0.18 25);
  --red-soft: oklch(0.93 0.05 28);
  --yellow: oklch(0.83 0.135 80);
  --yellow-deep: oklch(0.74 0.15 72);
  --yellow-soft: oklch(0.95 0.06 88);

  /* Board */
  --board: oklch(0.875 0.06 255);
  --board-deep: oklch(0.815 0.075 255);
  --hole: oklch(0.97 0.012 250);

  --radius: 26px;
  --shadow-sm: 0 2px 8px oklch(0.5 0.05 265 / 0.10);
  --shadow-md: 0 12px 30px oklch(0.45 0.06 265 / 0.13);
  --shadow-lg: 0 26px 60px oklch(0.4 0.07 265 / 0.18);

  --font-display: 'Fredoka', system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background:
    radial-gradient(1200px 800px at 18% -10%, var(--red-soft), transparent 60%),
    radial-gradient(1100px 760px at 88% 0%, oklch(0.93 0.05 255), transparent 55%),
    radial-gradient(900px 700px at 50% 120%, oklch(0.94 0.06 150 / .5), transparent 60%),
    linear-gradient(165deg, var(--bg-1), var(--bg-2));
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

/* Soul layer: drifting blobs + paper grain */
.bg-decor { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.bg-decor .blob { position: absolute; border-radius: 50%; filter: blur(64px); opacity: .55; will-change: transform; }
.bg-decor .b1 { width: 420px; height: 420px; left: -90px; top: -60px; background: var(--red); opacity: .32; animation: drift1 26s ease-in-out infinite; }
.bg-decor .b2 { width: 380px; height: 380px; right: -80px; top: 40px; background: oklch(0.8 0.1 255); opacity: .4; animation: drift2 31s ease-in-out infinite; }
.bg-decor .b3 { width: 340px; height: 340px; left: 24%; bottom: -120px; background: var(--yellow); opacity: .3; animation: drift3 29s ease-in-out infinite; }
.bg-decor .b4 { width: 300px; height: 300px; right: 14%; bottom: -80px; background: oklch(0.85 0.1 150); opacity: .28; animation: drift1 34s ease-in-out infinite reverse; }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px, 36px) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-46px, 30px) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px, -40px) scale(1.14); } }
.grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .05;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 26px 20px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: relative;
  z-index: 1;
}

/* ---- Top bar ---- */
.topbar {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pill-btn {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.pill-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pill-btn:active { transform: translateY(0); }
.pill-btn.icon { padding: 10px; width: 42px; height: 42px; justify-content: center; }

/* ---- Brand ---- */
.brand { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.brand-mark { display: flex; gap: 7px; }
.brand-mark i {
  width: 16px; height: 16px; border-radius: 50%;
  box-shadow: inset 0 -2px 4px oklch(0 0 0 / .12), inset 0 2px 4px oklch(1 0 0 / .5);
  animation: dot-bob 2.2s ease-in-out infinite;
}
.brand-mark i:nth-child(1) { background: var(--red); animation-delay: 0s; }
.brand-mark i:nth-child(2) { background: var(--board-deep); animation-delay: .18s; }
.brand-mark i:nth-child(3) { background: var(--yellow); animation-delay: .36s; }
@keyframes dot-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.brand h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 7vw, 48px);
  letter-spacing: -0.5px;
  line-height: 1;
}
.brand p { color: var(--ink-soft); font-size: 14px; font-weight: 600; }

/* ---- Tabs ---- */
.tabs {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px;
  gap: 4px;
  box-shadow: var(--shadow-sm);
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: center;
}
.tab {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 11px 17px;
  cursor: pointer;
  transition: color .2s ease, background .25s ease, box-shadow .25s ease;
  white-space: nowrap;
}
.tab:hover { color: var(--ink); }
.tab.active { color: var(--ink); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-sm); }
.tab.active[data-mode="connect3"], .tab.active[data-mode="connect4"], .tab.active[data-mode="ttt"] {
  background: linear-gradient(180deg, oklch(0.97 0.03 255), oklch(0.93 0.05 255));
}

/* ---- Options row ---- */
.options { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.seg {
  display: inline-flex;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px;
  gap: 3px;
  box-shadow: var(--shadow-sm);
}
.seg button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 13px;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 8px 15px;
  cursor: pointer;
  transition: all .18s ease;
  display: inline-flex; align-items: center; gap: 6px;
}
.seg button:hover { color: var(--ink); }
.seg button.on { color: white; background: linear-gradient(180deg, var(--board), var(--board-deep)); box-shadow: var(--shadow-sm); }
.seg.is-hidden { display: none; }

/* ---- Match card ---- */
.match {
  width: 100%;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.scorebar { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }

.player {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-radius: 18px;
  border: 2px solid transparent;
  background: var(--card-2);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.player.right { flex-direction: row-reverse; text-align: right; }
.player .chip {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  box-shadow: inset 0 -3px 6px oklch(0 0 0 / .14), inset 0 3px 6px oklch(1 0 0 / .5), var(--shadow-sm);
}
.player.red .chip { background: radial-gradient(circle at 35% 28%, oklch(0.82 0.1 30), var(--red) 62%, var(--red-deep)); }
.player.yellow .chip { background: radial-gradient(circle at 35% 28%, oklch(0.95 0.07 92), var(--yellow) 60%, var(--yellow-deep)); }
.player .meta { display: flex; flex-direction: column; line-height: 1.1; }
.player .name { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.player .score { font-family: var(--font-display); font-weight: 600; font-size: 26px; color: var(--ink); }
.player.active {
  border-color: oklch(0.84 0.06 255);
  background: linear-gradient(180deg, var(--card), oklch(0.96 0.025 255));
  box-shadow: 0 0 0 4px oklch(0.86 0.06 255 / .35), var(--shadow-md);
  animation: breathe 2.4s ease-in-out infinite;
}
.player.red.active { border-color: var(--red); box-shadow: 0 0 0 4px var(--red-soft), var(--shadow-md); }
.player.yellow.active { border-color: var(--yellow-deep); box-shadow: 0 0 0 4px var(--yellow-soft), var(--shadow-md); }
@keyframes breathe { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

.turn { text-align: center; min-width: 110px; }
.turn .label { font-family: var(--font-display); font-weight: 600; font-size: 18px; transition: color .2s ease; }
.turn .sub { font-size: 12px; color: var(--ink-faint); font-weight: 700; margin-top: 3px; min-height: 15px; }
.turn .draws { font-size: 11px; color: var(--ink-faint); font-weight: 700; margin-top: 2px; }

/* ---- Board: gravity games ---- */
.board-shell { display: flex; justify-content: center; padding: 6px 0; }
.board {
  background: linear-gradient(160deg, var(--board), var(--board-deep));
  border-radius: 30px;
  padding: clamp(12px, 2.4vw, 18px);
  box-shadow:
    inset 0 3px 10px oklch(1 0 0 / .25),
    inset 0 -6px 14px oklch(0 0 0 / .12),
    var(--shadow-md);
  position: relative;
}
.board::after {
  content: ''; position: absolute; inset: 7px;
  border: 2px dashed oklch(1 0 0 / .32);
  border-radius: 24px; pointer-events: none;
}
.grid { display: grid; gap: clamp(8px, 1.8vw, 13px); position: relative; z-index: 1; }
.cell {
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
}
.cell .hole {
  width: var(--cell, 56px); height: var(--cell, 56px);
  border-radius: 50%;
  background: var(--hole);
  box-shadow: inset 0 3px 6px oklch(0 0 0 / .16), inset 0 -2px 4px oklch(1 0 0 / .4);
  display: flex; align-items: center; justify-content: center;
  transition: box-shadow .15s ease, background .15s ease;
}
.col-hover .hole { background: oklch(0.99 0.01 250); box-shadow: inset 0 0 0 3px oklch(0.82 0.06 255 / .6), inset 0 3px 6px oklch(0 0 0 / .12); }
.cell.cursor .hole { box-shadow: inset 0 0 0 3px var(--cursor-color, var(--ink-soft)), inset 0 3px 6px oklch(0 0 0 / .14); }
.cell.full { cursor: not-allowed; }

/* Discs */
.disc {
  width: calc(var(--cell, 56px) - 6px); height: calc(var(--cell, 56px) - 6px);
  border-radius: 50%;
  box-shadow: inset 0 -4px 7px oklch(0 0 0 / .18), inset 0 4px 7px oklch(1 0 0 / .5), 0 3px 8px oklch(0.4 0.06 265 / .25);
}
.disc.red { background: radial-gradient(circle at 36% 28%, oklch(0.84 0.1 32), var(--red) 60%, var(--red-deep)); }
.disc.yellow { background: radial-gradient(circle at 36% 28%, oklch(0.96 0.07 92), var(--yellow) 58%, var(--yellow-deep)); }
.disc.ghost { opacity: .42; box-shadow: none; }
.disc.drop { animation: drop-in var(--drop-time, .42s) cubic-bezier(.34, 1.56, .5, 1) both; }
@keyframes drop-in {
  0%   { transform: translateY(var(--drop-from, -300px)); }
  100% { transform: translateY(0); }
}
.disc.win { animation: win-pop 1s ease-in-out infinite; z-index: 3; }
@keyframes win-pop {
  0%,100% { transform: scale(1); box-shadow: inset 0 -4px 7px oklch(0 0 0 / .18), inset 0 4px 7px oklch(1 0 0 / .5), 0 0 0 oklch(1 0.1 95 / 0); }
  50%     { transform: scale(1.12); box-shadow: inset 0 -4px 7px oklch(0 0 0 / .18), inset 0 4px 7px oklch(1 0 0 / .6), 0 0 22px oklch(0.92 0.13 95 / .9); }
}

/* Floating dropper chip (gravity modes) */
.dropper {
  position: absolute;
  transform: translateX(-50%);
  transition: left .16s cubic-bezier(.4, 0, .2, 1), top .16s ease;
  opacity: 0; pointer-events: none; z-index: 6;
}
.dropper.show { opacity: 1; }
.dropper-chip { border-radius: 50%; animation: hover-bob 1.9s ease-in-out infinite; }
.dropper-chip.red { background: radial-gradient(circle at 36% 28%, oklch(0.84 0.1 32), var(--red) 60%, var(--red-deep)); box-shadow: inset 0 -4px 7px oklch(0 0 0 / .18), inset 0 4px 7px oklch(1 0 0 / .5), 0 10px 14px oklch(0.5 0.08 25 / .28); }
.dropper-chip.yellow { background: radial-gradient(circle at 36% 28%, oklch(0.96 0.07 92), var(--yellow) 58%, var(--yellow-deep)); box-shadow: inset 0 -4px 7px oklch(0 0 0 / .18), inset 0 4px 7px oklch(1 0 0 / .5), 0 10px 14px oklch(0.55 0.08 80 / .28); }
.dropper-chip.blocked { opacity: .35; filter: grayscale(.5); animation: none; }
@keyframes hover-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---- Tic-Tac-Toe board ---- */
.board.ttt {
  background: linear-gradient(160deg, oklch(0.97 0.02 255), oklch(0.93 0.035 255));
  padding: clamp(10px, 2vw, 16px);
}
.board.ttt::after { border-color: oklch(0.7 0.04 255 / .28); }
.board.ttt .grid { gap: clamp(8px, 1.8vw, 12px); }
.board.ttt .cell { border-radius: 20px; }
.board.ttt .tile {
  width: var(--cell, 92px); height: var(--cell, 92px);
  border-radius: 20px;
  background: var(--card);
  box-shadow: var(--shadow-sm), inset 0 -3px 6px oklch(0 0 0 / .05);
  display: flex; align-items: center; justify-content: center;
  transition: transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.board.ttt .cell:not(.full):hover .tile { transform: translateY(-2px); background: oklch(0.99 0.01 90); box-shadow: var(--shadow-md); }
.board.ttt .cell.cursor .tile { box-shadow: inset 0 0 0 3px var(--cursor-color, var(--ink-soft)), var(--shadow-sm); }
.board.ttt .mark { width: 64%; height: 64%; }
.board.ttt .mark path, .board.ttt .mark circle {
  fill: none; stroke-linecap: round;
  stroke-dasharray: var(--len, 200); stroke-dashoffset: var(--len, 200);
  animation: draw .42s ease-out forwards;
}
.board.ttt .mark.red path, .board.ttt .mark.red circle { stroke: var(--red); }
.board.ttt .mark.yellow path, .board.ttt .mark.yellow circle { stroke: var(--yellow-deep); }
.board.ttt .mark.ghost { opacity: .35; }
.board.ttt .mark.ghost path, .board.ttt .mark.ghost circle { animation: none; stroke-dashoffset: 0; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.board.ttt .cell.win .tile { animation: tile-win 1s ease-in-out infinite; }
@keyframes tile-win {
  0%,100% { transform: scale(1); box-shadow: var(--shadow-sm); }
  50%     { transform: scale(1.07); box-shadow: 0 0 22px oklch(0.92 0.13 95 / .8), var(--shadow-md); }
}

/* ---- Footer controls ---- */
.status { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink-soft); text-align: center; min-height: 22px; }
.controls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn {
  font-family: var(--font-display);
  font-weight: 600; font-size: 15px;
  border: none; border-radius: 14px;
  padding: 12px 22px; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow: var(--shadow-sm);
  display: inline-flex; align-items: center; gap: 8px;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); }
.btn.primary { color: white; background: linear-gradient(180deg, var(--board), var(--board-deep)); }
.btn.ghost { color: var(--ink); background: var(--card-2); border: 1px solid var(--line); }

/* ---- How to play ---- */
.howto { width: 100%; max-width: 560px; }
.howto summary {
  list-style: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; color: var(--ink-soft);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px;
}
.howto summary::-webkit-details-marker { display: none; }
.howto[open] summary { color: var(--ink); }
.howto .chev { transition: transform .2s ease; }
.howto[open] .chev { transform: rotate(180deg); }
.howto .body {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 20px; box-shadow: var(--shadow-sm);
  font-size: 14px; color: var(--ink-soft); line-height: 1.55;
}
.howto .body strong { color: var(--ink); font-family: var(--font-display); }
.howto .body p { margin-top: 8px; }
.howto .body p:first-child { margin-top: 0; }

/* ---- Confetti ---- */
.confetti {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 80;
  border-radius: 2px;
  will-change: transform, opacity;
}

/* ---- Win banner ---- */
.banner {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: oklch(0.4 0.05 265 / .28);
  backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
.banner.show { opacity: 1; pointer-events: auto; }
.banner .card {
  background: var(--card); border-radius: 28px; padding: 36px 40px;
  box-shadow: var(--shadow-lg); text-align: center; max-width: 360px;
  transform: scale(.86) translateY(10px); transition: transform .35s cubic-bezier(.34,1.56,.5,1);
}
.banner.show .card { transform: scale(1) translateY(0); }
.banner .big-disc { width: 76px; height: 76px; border-radius: 50%; margin: 0 auto 16px; }
.banner .big-disc.red { background: radial-gradient(circle at 36% 28%, oklch(0.84 0.1 32), var(--red) 60%, var(--red-deep)); box-shadow: inset 0 -5px 9px oklch(0 0 0 / .18), inset 0 5px 9px oklch(1 0 0 / .5), var(--shadow-md); }
.banner .big-disc.yellow { background: radial-gradient(circle at 36% 28%, oklch(0.96 0.07 92), var(--yellow) 58%, var(--yellow-deep)); box-shadow: inset 0 -5px 9px oklch(0 0 0 / .18), inset 0 5px 9px oklch(1 0 0 / .5), var(--shadow-md); }
.banner .big-disc.draw { background: linear-gradient(135deg, var(--board), var(--board-deep)); box-shadow: var(--shadow-md); display:flex; align-items:center; justify-content:center; font-size: 38px; }
.banner h2 { font-family: var(--font-display); font-weight: 600; font-size: 28px; margin-bottom: 6px; }
.banner p { color: var(--ink-soft); font-size: 15px; font-weight: 600; margin-bottom: 22px; }
.banner .actions { display: flex; gap: 10px; justify-content: center; }

@media (max-width: 560px) {
  .player .name { font-size: 13px; }
  .player { padding: 10px 12px; gap: 9px; }
  .player .chip { width: 28px; height: 28px; }
  .player .score { font-size: 22px; }
  .tab { padding: 10px 14px; font-size: 14px; }
}