/* Fuchsbande on top of Fuchswald's stylesheet: lobby, band rows, and the code badge. */

.board.solo {
  grid-template-columns: minmax(0, 880px);
}
.board.solo .fox-slot { display: none; }
.progress:empty { visibility: hidden; }
.board.solo .task {
  /* A fixed vh height. min() made the sheet's height indefinite in mobile
     Safari, and the lobby (height 100%, overflow auto) then collapsed to
     an empty card. */
  height: 72vh;
  max-height: 640px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.intro.lobby {
  height: auto;
  min-height: min-content;
  overflow: visible;
  justify-content: flex-start;
  padding-top: 22px;
}
.intro.lobby > * {
  flex: 0 0 auto;
}
.lobby .hint {
  font-size: 0.95rem;
  font-weight: 600;
  max-width: 34em;
  opacity: 0.8;
}
.lobby .or {
  font-size: 1rem;
  opacity: 0.7;
}

.coats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 6px 0;
}
.coat {
  width: 76px;
  height: 76px;
  padding: 4px;
  border: 3px solid transparent;
  border-radius: 22px;
  background: rgba(255, 250, 243, 0.8);
  box-shadow: 0 4px 0 rgba(90, 60, 40, 0.18);
}
.coat[aria-checked="true"] {
  border-color: var(--amber);
  background: #fff6dd;
  transform: translateY(-3px);
}

.band-fox { display: block; width: 100%; height: 100%; }
.band-fox svg { width: 100%; height: 100%; display: block; }

.join {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.join input {
  width: 6.2em;
  min-height: 60px;
  border: 3px solid #d9c3a0;
  border-radius: 18px;
  background: #fffaf3;
  color: var(--ink);
  font: inherit;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-align: center;
  text-transform: uppercase;
  user-select: text;
  -webkit-user-select: text;
}
.join input:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 2px;
}
.go.small {
  min-height: 60px;
  font-size: 1.2rem;
}
.go:disabled { opacity: 0.6; }

.lobby-error {
  min-height: 1.3em;
  color: var(--fox);
}

.code-badge {
  min-height: 44px;
  padding: 4px 16px;
  border: none;
  border-radius: 999px;
  background: var(--card);
  color: var(--moss-dark);
  font-size: 1.15rem;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 28px rgba(58, 36, 24, 0.12);
}

.band-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 8px 0;
}
.band-cell {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 104px;
}
.band-cell .band-fox { width: 92px; height: 104px; }
.band-cell.busy .band-fox { opacity: 0.7; }
.band-cell .band-fox.me { filter: drop-shadow(0 0 6px rgba(242, 193, 78, 0.9)); }
.band-cell .tag {
  font-size: 0.95rem;
  font-weight: 800;
}
.band-cell.done .tag { color: var(--moss); }

.band-row.party .band-fox {
  width: 110px;
  height: 124px;
}
/* `hop` comes from wald.css. */
.band-fox.hop { animation: hop 0.9s ease-in-out infinite; }
.band-fox.hop:nth-child(2n) { animation-delay: 0.3s; }
.band-fox.hop:nth-child(3n) { animation-delay: 0.6s; }

@media (prefers-reduced-motion: reduce) {
  .band-fox.hop { animation: none; }
}

@media (max-width: 560px) {
  .coat { width: 60px; height: 60px; }
  .band-cell { width: 84px; }
  .band-cell .band-fox { width: 72px; height: 82px; }
}

/* The fox beside the sheet is hidden in the lobby, so it keeps no row. */
@media (max-width: 860px), (orientation: portrait) {
  .board.solo {
    grid-template-rows: minmax(0, 1fr);
  }
}

/* Phones on their side: everything of the lobby on one screen. */
@media (max-height: 520px) and (orientation: landscape) {
  .board.solo .task { height: 100%; }
  .lobby { padding-top: 10px; gap: 6px; }
  .lobby h1 { font-size: 1.8rem; }
  .lobby .hint, .lobby .or { display: none; }
  .coats { margin: 0; }
  .coat { width: 50px; height: 50px; padding: 2px; }
  .go, .go.small { min-height: 48px; padding: 8px 20px; font-size: 1.1rem; }
  .join input { min-height: 48px; font-size: 1.4rem; }
  .lobby > .go { order: 5; }
  .lobby > .join { order: 5; }
  .lobby > .lobby-error { order: 6; }
}

/* The memory at the stone: whose turn it is sits above the cards. */
.stone-game {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
}
.band-row.turns .band-cell { width: 70px; }
.band-row.turns .band-fox { width: 60px; height: 68px; opacity: 0.55; }
.band-row.turns .band-cell.turn .band-fox,
.band-row.turns .band-cell.done .band-fox { opacity: 1; }
.band-row.turns .band-cell.turn {
  border-radius: 18px;
  box-shadow: 0 0 0 4px var(--amber);
  background: rgba(255, 246, 221, 0.9);
}
.stone-game .card:disabled { cursor: default; }

@media (max-height: 520px) and (orientation: landscape) {
  .stone-game { gap: 4px; padding: 4px; }
  .stone-game .memory.big {
    grid-template-columns: repeat(6, min(10vw, 19vh));
    grid-auto-rows: min(10vw, 19vh);
    gap: 6px;
    height: auto;
    padding: 0;
  }
  .band-row.turns { margin: 0; }
  .band-row.turns .band-cell { width: 48px; }
  .band-row.turns .band-fox { width: 40px; height: 46px; }
}

/* Team animals: the band gathers, then everyone adds to one puzzle. */
.team-game {
  height: auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 10px;
  overflow: visible;
}
.team-game > * {
  flex: 0 0 auto;
}
.team-game .shapes { width: 100%; height: 100%; }
.team-shapes .hole { position: relative; width: min(20vw, 104px); }
.team-shapes .piece { width: min(22vw, 112px); }
.team-shapes .hole .band-fox.by {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 42px;
  height: 48px;
}
.tray-label {
  text-align: center;
  font-weight: 800;
  opacity: 0.75;
}
.team-pattern { gap: 10px; }
.team-pattern .pattern-row { gap: 8px; }
.team-pattern .tile { width: min(9vw, 72px); }
.team-pattern .tile.next { outline: 4px solid var(--amber); outline-offset: 2px; }
.team-pattern .choice:disabled { opacity: 0.45; cursor: default; }

@media (max-height: 520px) and (orientation: landscape) {
  .team-game { padding: 4px; gap: 4px; }
  .team-shapes .hole, .team-shapes .piece { width: min(12vw, 21vh); }
}

/* Narrow phones: in a sheet the code makes room for the buttons; it shows again in the forest. */
@media (max-width: 560px) {
  body[data-mode="task"] .code-badge { display: none; }
}