*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: system-ui, sans-serif; background: #fafafa; color: #1a1a1a; }
.login { min-height: 100dvh; display: grid; place-items: center; }
.login form { display: grid; gap: 12px; width: min(320px, 90vw); }
.login input, .login button { font-size: 1.2rem; padding: 12px; }
.error { color: #b00020; margin: 0; }
.placeholder, .about { padding: 24px; max-width: 720px; margin: 0 auto; }

/* Child mode */
.child { height: 100dvh; display: flex; flex-direction: column; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: #fff; border-bottom: 1px solid #ddd; }
.nav { font-size: 1.8rem; min-width: 56px; min-height: 56px; border: 2px solid #ccc; border-radius: 12px; background: #fff; cursor: pointer; }
.nav:disabled { opacity: .3; }
.nav { flex: none; }
.board-name { flex: 1; margin: 0; color: #888; font-size: clamp(1rem, 3vw, 1.6rem); text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grid { flex: 1; min-height: 0; display: grid; gap: 4px; padding: 4px; }
.cell { min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
        padding: 2px; border: 2px solid #ccc; border-radius: 10px; background: #fff; cursor: pointer; overflow: hidden; }
.cell:active { transform: scale(.96); background: #fff7cc; }
.cell.folder { border: 3px solid #e09b00; background: #fff4dc; }
.cell.empty { border: none; background: transparent; cursor: default; }
.cell img { flex: 1; min-height: 0; width: 100%; object-fit: contain; pointer-events: none; }
.cell .label { font-size: clamp(.6rem, 1.6vmin, 1.3rem); font-weight: 600; line-height: 1.1; text-transform: uppercase;
               max-width: 100%; overflow: hidden; overflow-wrap: anywhere; text-align: center;
               display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* Narrow portrait screens: ask to rotate instead of squeezing the grid (decision 2026-10-16). */
.rotate { display: none; }
@media (orientation: portrait) and (max-width: 700px) {
  .child .grid { visibility: hidden; }
  .child .rotate { display: flex; position: fixed; inset: 70px 0 0; flex-direction: column; align-items: center;
                   justify-content: center; text-align: center; font-size: 1.4rem; font-weight: 600; }
  .child .rotate span { font-size: 5rem; }
}

.phrase { flex: 1; min-width: 0; height: 56px; display: flex; align-items: center; gap: 6px; padding: 0 8px;
          border: 2px solid #ccc; border-radius: 12px; background: #fff; overflow-x: auto; scrollbar-width: none; }
.phrase.has-words .board-name { display: none; }
.word { flex: none; display: flex; flex-direction: column; align-items: center; font-size: .75rem; font-weight: 600; text-transform: uppercase; }
.word img { height: 34px; width: 34px; object-fit: contain; }