/* Let's Play Cards - base and responsive layout */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height: 1.5;
  color: #1a1a1a;
  background: #f5f5f5;
}

main {
  max-width: 100%;
  min-height: 100vh;
  padding: 1rem;
  margin: 0 auto;
}

h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  font-weight: 700;
}

form p {
  margin: 0 0 1rem;
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
}

select,
button {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
}

select {
  width: 100%;
  max-width: 20rem;
}

button {
  min-width: 120px;
  font-weight: 600;
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
  cursor: pointer;
}

button:hover {
  background: #1d4ed8;
}

/* Mobile first: default is narrow */
@media (max-width: 767px) {
  main {
    padding: 1rem;
  }
  select {
    width: 100%;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  main {
    max-width: 40rem;
    padding: 2rem;
  }
}

@media (min-width: 1024px) {
  main {
    max-width: 32rem;
    padding: 2rem 2rem 3rem;
  }
}

/* Step visibility (002: two-step flow) */
.step-hidden {
  display: none;
}

.step-visible {
  display: block;
}

#player-names-step h2 {
  margin: 0 0 1rem;
  font-size: 1.25rem;
  font-weight: 600;
}

#player-names-fields p {
  margin: 0 0 1rem;
}

#player-names-fields input[type="text"] {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 100%;
  max-width: 20rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Game history section (005) */
#game-history-section {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

#game-history-section h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

#game-history-container {
  font-size: 0.95rem;
}

.history-table {
  width: 100%;
  min-width: 16rem;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.history-table th,
.history-table td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.history-table th {
  background: #e5e7eb;
  font-weight: 600;
}

@media (max-width: 767px) {
  .history-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .history-table th,
  .history-table td {
    min-width: 4rem;
    padding: 0.5rem 0.35rem;
  }
}

/* Hearts score-keeping page (003) */
.hearts-page {
  max-width: 56rem;
}

.hearts-page .game-summary {
  margin-bottom: 1rem;
}

.hearts-page .rules-link {
  margin-bottom: 1rem;
}

.hearts-page .rules-link a {
  color: #2563eb;
  text-decoration: underline;
}

.hearts-page .rules-link a:hover {
  color: #1d4ed8;
}

.hearts-page .game-settings {
  margin-bottom: 1.5rem;
}

.hearts-page .game-settings label {
  display: inline;
  margin-right: 0.5rem;
}

.hearts-page .game-settings input[type="number"] {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.hearts-page .game-settings .desc {
  margin-left: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.hearts-page .score-sheet h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.hearts-score-table {
  width: 100%;
  min-width: 20rem;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.hearts-score-table th,
.hearts-score-table td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.35rem;
  text-align: left;
}

.hearts-score-table th {
  background: #e5e7eb;
  font-weight: 600;
}

.hearts-score-table .hearts-totals-row td {
  font-weight: 600;
  background: #f3f4f6;
}

.hearts-score-table .hearts-round-total-warn {
  color: #b91c1c;
  font-weight: 600;
}

.hearts-score-table input[type="number"] {
  width: 100%;
  min-width: 3rem;
  max-width: 5rem;
  padding: 0.35rem 0.5rem;
  font-size: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

@media (max-width: 767px) {
  .hearts-score-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .hearts-score-table th,
  .hearts-score-table td {
    min-width: 4rem;
    padding: 0.5rem 0.25rem;
  }

  .hearts-score-table input[type="number"] {
    min-width: 2.5rem;
    max-width: 4rem;
  }
}

/* Gin score-keeping page (004) */
.gin-page {
  max-width: 56rem;
}

.gin-page .game-summary {
  margin-bottom: 1rem;
}

.gin-page .rules-link {
  margin-bottom: 1rem;
}

.gin-page .rules-link a {
  color: #2563eb;
  text-decoration: underline;
}

.gin-page .rules-link a:hover {
  color: #1d4ed8;
}

.gin-page .game-settings {
  margin-bottom: 1.5rem;
}

.gin-page .game-settings label {
  display: inline;
  margin-right: 0.5rem;
}

.gin-page .game-settings input[type="number"] {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.gin-page .game-settings .desc {
  margin-left: 0.5rem;
  color: #666;
  font-size: 0.9rem;
}

.gin-page .score-sheet h2 {
  margin: 0 0 0.75rem;
  font-size: 1.25rem;
  font-weight: 600;
}

.gin-totals-table,
.gin-hands-table {
  width: 100%;
  min-width: 16rem;
  border-collapse: collapse;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.gin-totals-table th,
.gin-totals-table td,
.gin-hands-table th,
.gin-hands-table td {
  border: 1px solid #ccc;
  padding: 0.5rem 0.75rem;
  text-align: left;
}

.gin-totals-table th,
.gin-hands-table th {
  background: #e5e7eb;
  font-weight: 600;
}

.gin-add-hand {
  margin-top: 1rem;
}

.gin-add-hand p {
  margin: 0 0 0.5rem;
}

.gin-add-hand input[type="number"] {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  width: 5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 0.5rem;
}

.gin-add-hand button {
  margin-right: 0.5rem;
}

.gin-delete-hand {
  padding: 0.25rem 0.5rem;
  font-size: 0.9rem;
}

/* Back to main link (006) */
.back-to-main {
  margin: 0 0 1rem;
  font-size: 1rem;
}

.back-to-main a {
  color: #2563eb;
  text-decoration: underline;
  min-height: 44px;
  display: inline-block;
  line-height: 44px;
}

.back-to-main a:hover {
  color: #1d4ed8;
}

/* Game-over choices bar (006) */
.gin-game-over-choices {
  margin-top: 1.5rem;
  padding: 0.75rem;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 4px;
}

.gin-game-over-back {
  color: #2563eb;
  text-decoration: underline;
  min-height: 44px;
  line-height: 44px;
  display: inline-block;
  margin-right: 0.5rem;
}

.gin-game-over-back:hover {
  color: #1d4ed8;
}

.gin-game-over-stay {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.gin-game-over-stay:hover {
  background: #f3f4f6;
}

@media (max-width: 767px) {
  .gin-totals-table,
  .gin-hands-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .gin-totals-table th,
  .gin-totals-table td,
  .gin-hands-table th,
  .gin-hands-table td {
    min-width: 4rem;
    padding: 0.5rem 0.35rem;
  }
}