/* Pixel Pals Band - styles */
:root {
  --ink: #3b2418;
  --wood: #a0623a;
  --sand: #e9c893;
  --sand-light: #f6e3b8;
  --sky: #8fd3ff;
  --grass: #5cb85c;
  --coral: #ff6b8a;
  --coral-dark: #c9405e;
  --sun: #ffd93b;
  --cell: #fbf6ea;
  --font: 'Pixelify Sans', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sky);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

body {
  height: 100dvh;
  position: relative;
}

#sky {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
  z-index: 0;
}

.sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  display: block;
}

/* Screens */
.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  padding: max(12px, env(safe-area-inset-top)) 16px max(12px, env(safe-area-inset-bottom));
  z-index: 1;
  gap: 12px;
}
.screen.is-active { display: flex; }

/* Pixel-cornered button */
.pxbtn {
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--sand);
  border: 0;
  padding: 0;
  cursor: pointer;
  position: relative;
  clip-path: polygon(
    4px 0, calc(100% - 4px) 0, 100% 4px,
    100% calc(100% - 4px), calc(100% - 4px) 100%,
    4px 100%, 0 calc(100% - 4px), 0 4px
  );
  box-shadow: inset 0 0 0 4px var(--ink), inset 0 -10px 0 4px rgba(59, 36, 24, 0.18);
  transition: transform 80ms steps(2);
}
.pxbtn:active { transform: translateY(4px); box-shadow: inset 0 0 0 4px var(--ink); }
.pxbtn:focus-visible { outline: 4px solid var(--sun); outline-offset: 2px; }

/* Menu */
#menu { justify-content: center; overflow-y: auto; }

.title {
  margin: 0 0 8px;
  font-size: clamp(40px, 9vmin, 84px);
  line-height: 0.9;
  text-align: center;
  color: var(--cell);
  text-shadow: 4px 4px 0 var(--ink), 8px 8px 0 var(--coral-dark);
  letter-spacing: 0.02em;
}
.title span {
  display: block;
  color: var(--sun);
  font-size: 0.72em;
}

.menu-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 16px;
  width: 100%;
  max-width: 900px;
}
.menu-btn {
  min-height: clamp(140px, 26vmin, 230px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 10px 22px;
  font-size: clamp(18px, 3.6vmin, 30px);
}
.menu-art { width: clamp(64px, 14vmin, 112px); height: clamp(64px, 14vmin, 112px); display: grid; place-items: center; position: relative; }
.menu-art .sprite { width: 100%; height: 100%; }
.menu-art--arrows::after {
  content: '\25B2\A\25BC';
  white-space: pre;
  position: absolute;
  right: -0.9em;
  top: 0;
  font-size: 0.8em;
  line-height: 1.1;
  color: var(--coral-dark);
}
.menu-art--grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 8px;
}
.menu-art--grid i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--cell);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.menu-art--grid i.on { background: var(--coral); }

.hint {
  margin: 4px 0 0;
  font-size: clamp(16px, 2.6vmin, 20px);
  color: var(--ink);
  background: rgba(251, 246, 234, 0.8);
  padding: 4px 10px;
  box-shadow: 0 0 0 3px var(--ink);
}
.hint--keys { display: none; }
@media (hover: hover) and (pointer: fine) { .hint--keys { display: block; } }

/* Top bar */
.bar {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bar h2 {
  margin: 0;
  font-size: clamp(22px, 4.5vmin, 36px);
  color: var(--cell);
  text-shadow: 3px 3px 0 var(--ink);
}
.back {
  width: 64px;
  height: 56px;
  font-size: 30px;
  line-height: 1;
}

/* Animal band grid */
.band-grid {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 14px;
}
@media (orientation: portrait) {
  .band-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
  }
}
.animal {
  background: var(--sand-light);
  display: grid;
  place-items: center;
  min-height: 0;
  touch-action: none;
  overflow: visible;
}
.animal .sprite {
  width: min(80%, 36vh, 36vw);
  height: auto;
  aspect-ratio: 1;
  transform-origin: 50% 100%;
}
.animal.is-singing { background: var(--sun); }
.animal.is-singing .sprite { animation: bounce 320ms steps(4) both; }

@keyframes bounce {
  0%   { transform: scale(1.15, 0.85); }
  40%  { transform: scale(0.9, 1.2) translateY(-10%); }
  70%  { transform: scale(1.05, 0.95); }
  100% { transform: none; }
}

/* Floating notes */
.float-note {
  position: absolute;
  width: 32px;
  height: 32px;
  pointer-events: none;
  animation: floatUp 900ms steps(6) forwards;
}
@keyframes floatUp {
  from { transform: translate(-50%, -50%) rotate(-10deg); opacity: 1; }
  to   { transform: translate(-50%, -260%) rotate(12deg); opacity: 0; }
}

/* Beat box */
.beat-wrap {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  display: grid;
  place-items: center;
}
.beat-grid {
  display: grid;
  grid-template-columns: auto repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 6px;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 9 / 4;
  max-width: calc(100dvh * 1.6);
}
.row-face, .cell { grid-row: var(--lr); grid-column: var(--lc); }
@media (orientation: portrait) {
  .beat-grid {
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto repeat(8, 1fr);
    height: 100%;
    width: auto;
    max-width: 100%;
    aspect-ratio: 4 / 9.4;
  }
  .row-face, .cell { grid-row: var(--pr); grid-column: var(--pc); }
  .row-face { width: auto; height: clamp(40px, 9vmin, 96px); }
}
.row-face {
  display: grid;
  place-items: center;
  background: var(--sand);
  box-shadow: inset 0 0 0 3px var(--ink);
  width: clamp(40px, 9vmin, 96px);
}
.row-face .sprite { width: 80%; height: auto; aspect-ratio: 1; transform-origin: 50% 100%; }
.row-face.is-singing .sprite { animation: bounce 260ms steps(4) both; }

.cell {
  background: var(--cell);
  box-shadow: inset 0 0 0 3px var(--ink);
  display: grid;
  place-items: center;
  touch-action: none;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.cell:nth-child(9n + 2), .cell:nth-child(9n + 6) { background: var(--sand-light); }
.cell .sprite { width: 76%; height: auto; aspect-ratio: 1; display: none; }
.cell.on { background: var(--sun); }
.cell.on .sprite { display: block; }
.cell.is-head { box-shadow: inset 0 0 0 5px var(--coral); }
.cell.is-head.on { background: var(--coral); }
.cell.is-head.on .sprite { animation: bounce 240ms steps(3) both; }
.cell:focus-visible { outline: 4px solid var(--sun); outline-offset: -8px; }

.beat-controls {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  justify-content: center;
  flex-wrap: wrap;
}
.ctrl {
  white-space: nowrap;
  min-height: 64px;
  padding: 0 20px;
  font-size: clamp(18px, 3.4vmin, 28px);
  flex: 1 1 120px;
  max-width: 220px;
}
.ctrl--play {
  background: var(--coral);
  color: var(--cell);
  flex: 2 1 180px;
  max-width: 300px;
  font-size: clamp(22px, 4.5vmin, 34px);
  text-shadow: 2px 2px 0 var(--ink);
}
.ctrl--play.is-playing { background: var(--grass); }

/* Copy me, High or low, Clap along */
.teacher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 1100px;
}
.teacher-face { width: clamp(72px, 16vmin, 128px); height: clamp(72px, 16vmin, 128px); }
.teacher-face .sprite { width: 100%; height: 100%; transform-origin: 50% 100%; }
.teacher-face.is-singing .sprite { animation: bounce 320ms steps(4) both; }
.teacher-face.is-sad .sprite { animation: wobble 500ms steps(4) both; }
@keyframes wobble {
  0% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } 100% { transform: none; }
}
.status {
  margin: 0;
  font-size: clamp(22px, 4.2vmin, 34px);
  color: var(--cell);
  text-shadow: 3px 3px 0 var(--ink);
  text-align: center;
}
.status--big { font-size: clamp(26px, 5vmin, 40px); }
.status .arrow { color: var(--sun); }
.stars { display: flex; gap: 6px; min-height: 28px; }
.stars .sprite { width: 28px; height: 28px; opacity: 0.35; }
.stars .sprite.is-on { opacity: 1; animation: pop 300ms steps(3) both; }
@keyframes pop { 0% { transform: scale(0.4); } 60% { transform: scale(1.3); } 100% { transform: none; } }

.pals-grid {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (orientation: portrait) {
  .pals-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
}
.duo {
  flex: 1;
  width: 100%;
  max-width: 900px;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.animal.is-right { background: var(--grass); }
.animal.is-wrong { background: var(--sand); }
.pals-grid .animal .sprite, .duo .animal .sprite { width: min(85%, 42vh, 44vw); }

.dancers { display: flex; gap: 16px; }
.dancers .sprite { width: clamp(56px, 12vmin, 96px); height: auto; aspect-ratio: 1; transform-origin: 50% 100%; }
.dancers .sprite.is-singing { animation: bounce 260ms steps(4) both; }
.dots { display: flex; gap: 12px; }
.dots i {
  display: block;
  width: clamp(20px, 5vmin, 36px);
  height: clamp(20px, 5vmin, 36px);
  background: var(--cell);
  box-shadow: inset 0 0 0 3px var(--ink);
}
.dots i.is-on { background: var(--coral); }
.dots i:first-child.is-on { background: var(--sun); }
.drum {
  flex: 1;
  width: min(100%, 70vh, 520px);
  min-height: 0;
  background: var(--sand-light);
  display: grid;
  place-items: center;
  touch-action: none;
}
.drum .sprite { width: min(80%, 50vh); height: auto; aspect-ratio: 1; transform-origin: 50% 100%; }
.drum.is-hit { background: var(--sun); }
.drum.is-hit .sprite { animation: bounce 220ms steps(3) both; }
.drum.is-good { background: var(--grass); }

#debug {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  margin: 0;
  max-width: 100%;
  padding: 6px 8px;
  font: 12px/1.35 monospace;
  color: #fff;
  background: rgba(0, 0, 0, 0.75);
  white-space: pre-wrap;
  word-break: break-all;
  pointer-events: none;
}

/* Shown only when audio could not start after a tap */
.sound-hint {
  display: none;
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 5;
  max-width: calc(100% - 32px);
  padding: 10px 14px;
  background: var(--sun);
  color: var(--ink);
  font-size: clamp(16px, 2.6vmin, 20px);
  box-shadow: 0 0 0 4px var(--ink);
  text-align: center;
  pointer-events: none;
}
.sound-hint.is-visible { display: block; }

@media (prefers-reduced-motion: reduce) {
  .animal.is-singing .sprite,
  .row-face.is-singing .sprite,
  .cell.is-head.on .sprite,
  .teacher-face .sprite, .dancers .sprite, .drum .sprite, .stars .sprite { animation: none; }
  .float-note { animation-duration: 400ms; }
}