/* CribbageAI — the table. Green felt, a race-track board, a racing deck. */

:root {
  --felt-centre: #1a7a45;
  --felt-mid:    #0d5f34;
  --felt-edge:   #05412a;
  --ink:         #ffffff;
  --card-w:      92px;
  --radius:      18px;
  --rounded: 'SF Pro Rounded', 'Nunito', 'Varela Round', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --spring: cubic-bezier(0.34, 1.32, 0.5, 1);
}

* { box-sizing: border-box; }

/* Several elements below set an explicit display, which would otherwise beat
   the hidden attribute. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  height: 100%;
  font-family: var(--rounded);
  color: var(--ink);
  background: var(--felt-edge);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

body {
  background:
    radial-gradient(ellipse 90% 70% at 50% 74%,
      var(--felt-centre) 0%, var(--felt-mid) 46%, var(--felt-edge) 100%);
}

#app {
  min-height: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 10px 18px 104px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ---- header ---------------------------------------------------------- */

.topbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 12px;
}

.scorecard {
  background: rgba(0, 0, 0, 0.5);
  border-radius: var(--radius);
  padding: 10px 16px 12px;
  min-width: 128px;
  width: max-content;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.28);
}
.scorecard.ai { justify-self: end; text-align: right; }

.scorecard .who {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
}
.scorecard.ai .who { flex-direction: row-reverse; }

.peg-dot {
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset -2px -2px 3px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.4);
}
.peg-dot.human { background: radial-gradient(circle at 35% 30%, #ff6b62, #d01a1a); }
.peg-dot.ai    { background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd2); }

.dealer-badge {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: #0d5f34;
  font-size: 13px; font-weight: 800;
}

.scorecard .value { font-size: 40px; font-weight: 800; line-height: 1.05; }
.scorecard .of { font-size: 15px; opacity: 0.62; }

.titleblock { text-align: center; padding-top: 2px; }
.titleblock h1 {
  margin: 0; font-size: 31px; font-weight: 800; letter-spacing: 0.03em;
}
.titleblock .subtitle { margin: 2px 0 0; font-size: 17px; opacity: 0.78; }
.titleblock .status { margin: 4px 0 0; font-size: 19px; min-height: 24px; }

/* ---- board ----------------------------------------------------------- */

/* The board keeps its 1000 x 260 proportions and never eats more than a
   quarter of a short window. */
.board-wrap {
  position: relative;
  width: min(100%, calc(29vh * 3.846));
  margin: 0 auto;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,0.4));
}

/* ---- Formula 1 start lights ------------------------------------------ */
/* Five reds light in sequence, then all go out at once. The blackout is
   the start, so the unlit state has to read as deliberate rather than as
   nothing being there — hence the recessed dark-red lenses. */

.grid-lights {
  position: absolute;
  left: 50%;
  bottom: 4%;
  transform: translateX(-50%);
  display: flex;
  gap: clamp(6px, 1.1vw, 15px);
  padding: clamp(8px, 1.1vw, 15px) clamp(11px, 1.5vw, 21px);
  background: rgba(13, 13, 15, 0.93);
  border-radius: clamp(10px, 1.4vw, 18px);
  box-shadow: 0 7px 26px rgba(0, 0, 0, 0.6),
              inset 0 1px 0 rgba(255, 255, 255, 0.07);
  z-index: 6;
  animation: gantry-in 320ms var(--spring) both;
}

/* Blackout: the panel holds dark for a beat, then clears the board. */
.grid-lights.blackout { animation: gantry-out 620ms ease-in both; }

@keyframes gantry-in {
  from { transform: translate(-50%, 14px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes gantry-out {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  55%  { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -10px); opacity: 0; }
}

.lamp {
  width: clamp(19px, 2.9vw, 40px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #2b0c0c;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.7);
  /* Snappy on, so each light lands rather than fades up. */
  transition: background 80ms ease-out, box-shadow 80ms ease-out;
}

.lamp.on {
  background: radial-gradient(circle at 38% 32%, #ff9a90, #ff2626 56%, #cf0f0f);
  box-shadow: 0 0 15px 4px rgba(255, 45, 45, 0.7),
              0 0 38px 12px rgba(255, 30, 30, 0.32),
              inset 0 1px 3px rgba(255, 255, 255, 0.4);
}
.board-svg { display: block; width: 100%; height: auto; }

.peg { transition: transform 420ms var(--spring), opacity 260ms ease-in-out; }

/* ---- the table ------------------------------------------------------- */

.table {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.seat { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.seat-label {
  display: flex; align-items: center; gap: 7px;
  font-size: 17px; font-weight: 600; opacity: 0.9;
}

.hand { display: flex; gap: 8px; min-height: calc(var(--card-w) * 1.4); }
.hand.ai { --card-w: 84px; }

.card {
  width: var(--card-w);
  flex: 0 0 auto;
  border: none; padding: 0; background: none;
  border-radius: calc(var(--card-w) * 0.12);
  transition: transform 380ms var(--spring), opacity 320ms ease-in-out,
              box-shadow 200ms ease-in-out;
  animation: deal-in 380ms var(--spring) backwards;
}
.card .card-svg { display: block; width: 100%; height: auto; }

@keyframes deal-in {
  from { transform: translate(0, -120px) scale(0.7) rotate(-6deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.card.playable { cursor: pointer; }
.card.playable:hover { transform: translateY(-9px); }
.card.playable:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
.card.selected {
  transform: translateY(-20px);
  filter: drop-shadow(0 0 0 #ffd166);
  box-shadow: 0 0 0 3px #ffd166, 0 10px 18px rgba(0,0,0,0.4);
}
.card.dimmed { opacity: 0.42; }

/* ---- middle: starter, crib, the play --------------------------------- */

/* Starter, crib, and the play sit side by side so the table's height never
   jumps between phases. */
.middle {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  gap: 30px; min-height: calc(var(--card-w) * 1.4 + 26px);
  width: 100%;
}
/* Once the play starts, the slots step aside and the played cards take the
   centre line. */
.middle.playing { display: grid; grid-template-columns: 1fr auto 1fr; }
.middle.playing .slots { grid-column: 1; justify-self: start; }
.middle.playing .playarea { grid-column: 2; justify-self: center; }


.slots { display: flex; gap: 26px; align-items: flex-start; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.slot-label { font-size: 15px; opacity: 0.8; }
.slot-box {
  width: var(--card-w);
  height: calc(var(--card-w) * 1.4);
  border-radius: calc(var(--card-w) * 0.12);
  border: 2px dashed rgba(255, 255, 255, 0.32);
  display: grid; place-items: center;
}
.slot-box.filled { border-color: transparent; }
.slot-box .card { animation: none; }

.crib-stack { position: relative; width: var(--card-w); height: calc(var(--card-w) * 1.4); }
.crib-stack .card { position: absolute; top: 0; left: 0; }

.playarea { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 620px; }
.count-badge {
  min-width: 74px; padding: 8px 14px;
  background: rgba(0,0,0,0.45); border-radius: 14px;
  text-align: center;
}
.count-badge .n { display: block; font-size: 30px; font-weight: 800; line-height: 1; }
.count-badge .label { font-size: 12px; opacity: 0.7; letter-spacing: 0.08em; }

.played { display: flex; gap: 6px; min-height: calc(var(--card-w) * 1.4); align-items: center; }
.played .card { --card-w: 74px; }
.played .by-ai { transform: translateY(-12px); }
.played .by-human { transform: translateY(12px); }

.peg-flash {
  position: absolute; font-size: 17px; font-weight: 700; color: #ffd166;
  animation: float-up 1100ms ease-out both;
}
@keyframes float-up {
  from { transform: translateY(0); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: translateY(-38px); opacity: 0; }
}

/* ---- the show -------------------------------------------------------- */

/* While a hand is counted the table dims behind the panel, so the count is
   the only thing to read. */
.table.counting::after {
  content: ''; position: absolute; inset: -30px -25vw;
  background: radial-gradient(ellipse at center,
    rgba(3, 38, 22, 0.78) 0%, rgba(3, 38, 22, 0.66) 48%, rgba(3, 38, 22, 0) 78%);
  z-index: 4;
  animation: fade-in 260ms ease-out both;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The count floats over the table rather than pushing it around, so the
   hands stay exactly where they were while a hand is counted. */
.show-panel {
  position: absolute; left: 50%; top: 50%; z-index: 5;
  background: rgba(0, 0, 0, 0.82);
  border-radius: 22px;
  padding: 16px 22px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
  animation: panel-in 320ms var(--spring) both;
}
@keyframes panel-in {
  from { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes pop-in {
  from { transform: scale(0.94); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.show-panel h2 { margin: 0; font-size: 22px; font-weight: 700; }
.show-cards { display: flex; gap: 7px; }
.show-cards .card { --card-w: 68px; animation: none; }
.show-cards .starter { margin-left: 14px; box-shadow: 0 0 0 3px rgba(255,209,102,0.9); border-radius: 8px; }
.show-events { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 520px; }
.chip {
  background: rgba(255,255,255,0.14); border-radius: 999px;
  padding: 3px 11px; font-size: 14px;
}
.show-total { font-size: 30px; font-weight: 800; }
.show-total.big { color: #ffd166; }
.show-total .nothing { font-size: 19px; font-weight: 600; opacity: 0.85; }

/* ---- controls -------------------------------------------------------- */

.controls {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 24px 18px;
  pointer-events: none;
}
.controls > * { pointer-events: auto; }
.centre-controls { display: flex; align-items: center; gap: 12px; }

.pill, .circle {
  font-family: var(--rounded); font-size: 17px; font-weight: 600;
  color: var(--ink); border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.14);
  transition: background 160ms ease, transform 120ms ease;
}
.pill { border-radius: 999px; padding: 12px 22px; }
.circle { border-radius: 50%; width: 48px; height: 48px; display: grid; place-items: center; }
.circle svg { width: 22px; height: 22px; fill: currentColor; }
.seat-label svg { width: 17px; height: 17px; fill: currentColor; opacity: 0.85; }
.pill:hover:not(:disabled), .circle:hover { background: rgba(255,255,255,0.24); }
.pill:active:not(:disabled), .circle:active { transform: scale(0.96); }
.pill.primary { background: #1f9d55; }
.pill.primary:hover:not(:disabled) { background: #25b562; }
.pill:disabled { opacity: 0.42; cursor: default; }
.circle.off { opacity: 0.5; }

/* ---- game over ------------------------------------------------------- */

.overlay {
  position: fixed; inset: 0; display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.55); z-index: 20;
  animation: pop-in 300ms ease-out both;
}
.overlay .panel {
  background: rgba(12, 60, 36, 0.96);
  border-radius: 26px; padding: 30px 40px; text-align: center;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5); max-width: 560px;
}
.overlay h2 { margin: 0 0 6px; font-size: 38px; font-weight: 800; }
.overlay .skunk { font-size: 24px; color: #ffd166; font-weight: 700; margin: 0 0 10px; }
.overlay p { margin: 0 0 18px; font-size: 19px; opacity: 0.9; }
.overlay .rules { text-align: left; font-size: 16px; line-height: 1.55; opacity: 0.92; }
.overlay .rules h3 { margin: 14px 0 4px; font-size: 17px; }

canvas.confetti {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 30;
}

/* ---- smaller screens ------------------------------------------------- */

/* Short windows: give the cards back some of the height. */
@media (max-height: 900px) {
  :root { --card-w: 78px; }
  .hand.ai { --card-w: 70px; }
  .titleblock h1 { font-size: 27px; }
  .scorecard .value { font-size: 34px; }
}
@media (max-height: 760px) {
  :root { --card-w: 64px; }
  .hand.ai { --card-w: 58px; }
  .titleblock .subtitle { display: none; }
}

@media (max-width: 900px) {
  :root { --card-w: 68px; }
  .hand.ai { --card-w: 60px; }
  .titleblock h1 { font-size: 26px; }
  .scorecard .value { font-size: 34px; }
  .scorecard { min-width: 96px; padding: 8px 12px 10px; }
  #app { padding: 10px 10px 92px; }
}

@media (max-width: 620px) {
  :root { --card-w: 54px; }
  .hand { gap: 5px; }
  .titleblock .subtitle { display: none; }
  .controls { padding: 8px 10px 12px; }
  .pill { padding: 10px 14px; font-size: 15px; }
}

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