/* Connect 4. The page layout, toggles, charts and tooltips come from
   battleship.css; this file adds the board and the pieces only this game has. */

:root {
  --red: #e34948;
  --yellow: #f3c969;
  --frame: #15394a;
  --hole: #0b1c17;
}

.c4-wrap { max-width: 560px; margin: 0 auto; }

.c4-strip, .c4-letters, .c4-board { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }

.c4-strip[hidden] { display: grid; visibility: hidden; }
.c4-strip { gap: 6px; padding: 0 10px; margin-bottom: 6px; min-height: 30px; }
.c4-strip div {
  display: grid; place-items: center;
  height: 30px; border-radius: 6px;
  font-family: var(--mono); font-size: clamp(11px, 2.6vw, 13px); font-weight: 700;
  background: rgba(255, 255, 255, .04);
}
.c4-strip div.actual { box-shadow: inset 0 0 0 2px var(--ink); }
.c4-strip div.dark-ink { color: #08213f; }

.c4-letters { padding: 0 10px; margin-top: 6px; }
.c4-letters span { text-align: center; font-family: var(--mono); color: var(--ink-dim); font-weight: 700; font-size: 13px; }

.c4-board {
  gap: 6px; padding: 10px;
  background: var(--frame);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px #24566b, 0 8px 24px rgba(0, 0, 0, .35);
}

.c4-col {
  display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px;
  padding: 0; border: 0; border-radius: 10px; background: transparent;
  touch-action: manipulation;
}
.c4-col:hover:not(:disabled) { background: rgba(255, 255, 255, .06); }
.c4-col:disabled { opacity: 1; cursor: default; }

.c4-hole {
  aspect-ratio: 1; border-radius: 50%;
  background: var(--hole);
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, .55);
  display: grid; place-items: center;
  font-family: var(--mono); font-weight: 700; font-size: clamp(11px, 2.4vw, 13px);
  color: var(--ink);
  position: relative;
}
.c4-hole.you, .c4-hole.cpu, .c4-hole.ghost {
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 4px rgba(0, 0, 0, .4);
}
.c4-hole.you { background: var(--red); }
.c4-hole.cpu { background: var(--yellow); }
.c4-hole.ghost { background: var(--red); opacity: .45; }
.c4-hole.heat.dark-ink { color: #08213f; }
.c4-hole.actual { outline: 3px solid var(--ink); outline-offset: 2px; }
.c4-hole.last::after {
  content: ""; width: 28%; height: 28%; border-radius: 50%;
  background: rgba(0, 0, 0, .28);
}
.c4-hole.win { animation: c4-win 1s ease-in-out infinite alternate; }
.c4-hole.drop { animation: c4-drop .32s cubic-bezier(.4, 0, 1, 1); }

@keyframes c4-drop { from { transform: translateY(calc(var(--fall, 3) * -118%)); } to { transform: none; } }
@keyframes c4-win { to { box-shadow: 0 0 0 4px var(--ink), 0 0 18px var(--ink); } }
@media (prefers-reduced-motion: reduce) { .c4-hole.drop, .c4-hole.win { animation: none; } }

.c4-stat { font-size: 15px; margin: 6px 0 10px; line-height: 1.45; }
.c4-stat b { font-family: var(--mono); font-size: 22px; color: var(--ink); }
.swatch.band { display: inline-block; width: 16px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: middle; background: rgba(217, 89, 38, .28); }
.c4-trail { position: relative; }
.c4-trail svg, .c4-you svg { display: block; width: 100%; height: auto; }
.c4-trail .area { fill: rgba(217, 89, 38, .22); }
.c4-trail .grid { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.c4-trail .tick { fill: var(--ink-dim); font-size: 11px; font-family: var(--mono); }
.c4-trail .line { fill: none; stroke: var(--s-posterior); stroke-width: 2; stroke-linejoin: round; }
.c4-trail .truth { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 4 4; }
.c4-trail .truth-label { fill: var(--ink); font-size: 11px; font-family: var(--mono); }

.c4-why { margin-top: 16px; }
.c4-q {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px;
  margin-top: 10px; max-width: 560px;
}
.c4-q .col { display: grid; grid-template-rows: 44px 44px auto auto; gap: 0; }
.c4-q .up, .c4-q .down { position: relative; }
.c4-q .up { border-bottom: 1px solid var(--line); }
.c4-q .bar {
  position: absolute; left: 22%; right: 22%;
  background: var(--ink-dim);
}
.c4-q .up .bar { bottom: 0; border-radius: 4px 4px 0 0; }
.c4-q .down .bar { top: 0; border-radius: 0 0 4px 4px; }
.c4-q .col.played .bar { background: var(--ink); }
.c4-q .v { text-align: center; font-family: var(--mono); font-size: 12px; margin-top: 4px; }
.c4-q .name { text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-dim); font-weight: 700; }
.c4-q .col.played .name { color: var(--ink); }
.c4-q .col.full { opacity: .35; }