* { box-sizing: border-box; }
body {
  font-family: system-ui, sans-serif;
  margin: 0; padding: 1rem 1rem 6rem;
  background: #0b5d3b; color: #fff;
}
.screen { display: none; max-width: 640px; margin: 0 auto; }
.screen.active { display: block; }
h1 { text-align: center; }
input, button {
  display: block; width: 100%; padding: .75rem;
  margin: .5rem 0; font-size: 1rem; border-radius: .5rem; border: none;
}
button { background: #f4c430; color: #222; font-weight: 700; cursor: pointer; }
button:disabled { opacity: .5; cursor: not-allowed; }
.error { color: #ffb3b3; min-height: 1.2em; }
.hint { color: #d7f5e6; min-height: 1.2em; }
header { display: flex; justify-content: space-between; margin-bottom: .5rem; }
.counter { text-align: center; font-weight: 700; }
.deck {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
}
.card {
  aspect-ratio: 2/3; display: flex; align-items: center; justify-content: center;
  background: #fff; color: #222; border-radius: .4rem; font-weight: 700;
  cursor: pointer; user-select: none; font-size: .95rem;
}
.card.red { color: #c0392b; }
.card.selected { outline: 3px solid #f4c430; transform: translateY(-4px); }
.card.taken {
  opacity: .35; cursor: not-allowed; pointer-events: none;
  background: #999; text-decoration: line-through;
}
.btn-row { display: flex; gap: .5rem; }
.btn-row button { margin: .25rem 0; }
button.secondary { background: #134e35; color: #d7f5e6; }
.hidden { display: none !important; }
.signal-bar {
  position: fixed; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem 1rem; background: #08412a;
  box-shadow: 0 -2px 10px rgba(0,0,0,.4);
}
.signal-legend { display: flex; gap: .9rem; font-size: .75rem; color: #d7f5e6; }
.signal-legend .dot {
  display: inline-block; width: .6rem; height: .6rem;
  border-radius: 50%; margin-right: .25rem; vertical-align: middle;
}
.signals { display: flex; gap: .5rem; }
.signal-card {
  width: 3rem; padding: .35rem 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: #fff; color: #222; border-radius: .5rem;
  font-weight: 700; cursor: pointer; user-select: none;
  border: 2px solid transparent;
}
.signal-card .suit { font-size: 1.4rem; line-height: 1; }
.signal-card.red .suit { color: #c0392b; }
.signal-card .who { display: flex; gap: .3rem; margin-top: .3rem; }
.signal-card .dot {
  width: .55rem; height: .55rem; border-radius: 50%; background: #cbd5e1;
}
/* Light each side on its own so overlapping picks both stay visible. */
.signal-card.me-on { border-color: #22c55e; }
.signal-card.me-on .dot.me { background: #22c55e; }
.signal-card.mate-on { box-shadow: 0 0 12px 3px #f4c430; }
.signal-card.mate-on .dot.mate { background: #f4c430; }
.signal-legend .dot.me { background: #22c55e; }
.signal-legend .dot.mate { background: #f4c430; }
.hands { display: flex; gap: 1rem; }
.hands > div { flex: 1; }
.hand { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }