/* Palengke Pantry presentation, scoped to the game panels only.
   The stall frame, board and pieces are original Puso work: plum
   night with a capiz-day light toggle, gold win motif, banig-woven
   board border. Pieces are distinct by shape and name text, never
   colour alone. On narrow phones the tile gloss moves to the legend
   below the board, never absent. Reduced motion is respected. */
.m3-couples, .m3-solo {
  border: 1px solid #d4a017;
  border-radius: 12px;
  padding: 12px;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.06);
}
.m3-couples.m3-light, .m3-solo.m3-light {
  background: rgba(91, 26, 82, 0.06);
  border-color: rgba(91, 26, 82, 0.35);
}
.m3-awning {
  height: 14px;
  border-radius: 8px 8px 0 0;
  background: repeating-linear-gradient(90deg,
    #5b1a52 0 32px, #e85d75 32px 64px, #ff8a5c 64px 96px, #d4a017 96px 128px);
  margin-bottom: 8px;
}
.m3-couples h4, .m3-solo h4 { margin: 8px 0; }
.m3-note { font-weight: 600; }
.m3-warning { font-weight: 700; color: #ff8a5c; }
.m3-scores { font-weight: 600; }
.m3-message { min-height: 1.4em; }
.m3-orders { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0; }
.m3-order-card {
  flex: 1 1 220px;
  border: 1px solid rgba(212, 160, 23, 0.5);
  border-radius: 10px;
  padding: 8px 10px;
}
.m3-order-card.m3-active { border-width: 2px; border-color: #ffd97a; }
.m3-order-card ul { margin: 6px 0; padding-left: 18px; }
.m3-order-card li.m3-served { text-decoration: line-through; opacity: 0.75; }
.m3-board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 2px;
  width: 100%;
  max-width: 520px;
  margin: 10px auto;
  padding: 6px;
  border: 3px solid #8a5a2b;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.18);
}
.m3-cell {
  aspect-ratio: 1;
  min-width: 0;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid rgba(212, 160, 23, 0.4);
  background: #fff8ee;
  color: #2b1230;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.m3-cell:disabled { cursor: default; opacity: 0.92; }
.m3-cell:focus-visible { outline: 3px solid #ff8a5c; outline-offset: 2px; }
.m3-cell svg { width: 100%; height: auto; max-height: 60%; }
.m3-cell .m3-label { font-size: 11px; font-weight: 700; line-height: 1.1; }
.m3-cell .m3-gloss { font-size: 9px; line-height: 1.1; opacity: 0.85; }
.m3-cell .m3-badge { font-size: 9px; font-weight: 700; color: #7b2d8b; }
.m3-cell.m3-selected { outline: 3px solid #ffd97a; outline-offset: 1px; }
.m3-cell.m3-hint { outline: 3px solid #4e7a2e; outline-offset: 1px; }
.m3-cell.m3-shake { animation: m3-shake 0.35s; }
@keyframes m3-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.m3-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0; font-size: 13px; }
.m3-legend-item { white-space: nowrap; }
.m3-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m3-reactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.m3-countdown { font-weight: 600; width: 100%; }
.m3-win { text-align: center; padding: 10px; border-top: 3px solid #d4a017; border-bottom: 3px solid #d4a017; }
.m3-win-hearts { font-size: 28px; color: #e85d75; letter-spacing: 4px; }
.m3-result { border-top: 2px solid #d4a017; margin-top: 12px; padding-top: 8px; }
.m3-narrow-note { display: none; font-size: 13px; }
.m3-label-block { display: block; margin: 8px 0; }
@media (max-width: 480px) {
  .m3-cell .m3-gloss { display: none; }
  .m3-cell .m3-label { font-size: 10px; }
}
@media (max-width: 420px) {
  .m3-couples, .m3-solo { padding: 8px; }
  .m3-board { gap: 2px; padding: 4px; }
  .m3-orders { flex-direction: column; }
}
@media (max-width: 320px) {
  .m3-narrow-note { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .m3-cell.m3-shake { animation: none; }
}