/* Shared look for the Charlotte learning games (with shared/quizui.js). */
.stage { position: relative; display: grid; gap: 14px; justify-items: center; }
.picks { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pick {
  display: grid; justify-items: center; align-content: center; gap: 4px; min-width: 104px; min-height: 104px; padding: 10px 12px;
  border-radius: 24px; border: 4px solid #fff; background: #fffaf0; color: #2a1a10; font: inherit; font-weight: 800; font-size: 16px;
  box-shadow: 0 5px 14px rgba(0, 0, 0, .3); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .15s;
}
.pick:hover:not(:disabled), .pick:focus-visible { transform: translateY(-3px) scale(1.04); }
.pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.pick:disabled { cursor: default; }
.pick .ic { font-size: 54px; line-height: 1.1; }
.pick.nope { animation: nope .45s ease-in-out; border-color: #f07a2c; }
.pick.hint { animation: hintglow 1s ease-in-out infinite; }
.pick.yes { border-color: #7cc95a; box-shadow: 0 0 0 4px #7cc95a, 0 0 26px rgba(124, 201, 90, .8); }
.pick.dim { opacity: .45; }
@keyframes nope { 20%, 60% { transform: translateX(-9px) rotate(-3deg); } 40%, 80% { transform: translateX(9px) rotate(3deg); } }
@keyframes hintglow { 50% { box-shadow: 0 0 0 5px #fff6a0, 0 0 30px rgba(255, 236, 120, .95); } }
.scene { width: min(100%, 640px); display: block; border-radius: 22px; user-select: none; -webkit-user-select: none; }
.pop-in { animation: popin .5s cubic-bezier(.2, 1.6, .4, 1); transform-box: fill-box; transform-origin: center; }
@keyframes popin { from { transform: scale(0); } }
@media (max-width: 560px) {
  .picks { gap: 8px; width: 100%; }
  .pick { min-width: 0; width: calc((100% - 16px) / 3); max-width: 120px; min-height: 92px; padding: 8px 4px; font-size: 14px; }
  .pick .ic { font-size: 42px; }
}
@media (prefers-reduced-motion: reduce) { .pick, .pick.nope, .pick.hint, .pop-in { animation: none; transition: none; } }