/* layout.css -- structure and responsiveness (works the same on PC and phone).
   Visual styling lives in paper.css; this file is about boxes and flow. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  /* keep content away from notches / rounded corners on phones */
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
}

#app {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 0.9rem 2rem;
}

/* play area = the board sheet stacked above the pool sheet */
.play {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.board {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1rem 1rem 1.1rem;
}

/* each headline = a row of slots that wraps on narrow screens */
.line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--hairline);
}
.line:last-child {
  border-bottom: none;
}

/* the shared pool of scraps */
.pool {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem 0.6rem;
  min-height: 110px;
  padding: 0.9rem 1rem 1.1rem;
}

/* utility */
.hidden {
  display: none !important;
}

/* controls */
.controls {
  margin-top: 1.25rem;
  text-align: center;
}
.buttons {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* a little more room to breathe on larger screens */
@media (min-width: 600px) {
  #app {
    padding-top: 1.5rem;
  }
  .line {
    gap: 0.6rem;
  }
}