.t4 { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; }
.t4-room { position: relative; flex: 1; min-height: 0; min-width: 0; display: grid; place-items: center; }
.t4-side { flex: none; display: flex; align-items: center; gap: 10px; }
.t4-tray { flex: 1; display: flex; gap: 10px; overflow-x: auto; padding: 8px; background: #FFF4DE; border: 4px solid #1A1A1A; border-radius: 26px; min-height: 84px; }
@media (orientation: landscape) and (min-width: 700px) {
  .t4 { flex-direction: row; }
  .t4-side { flex-direction: column; height: 100%; }
  .t4-tray { flex-direction: column; overflow-x: hidden; overflow-y: auto; }
}
.t4-pick { flex: none; width: 76px; height: 76px; padding: 6px; border: 3px solid #1A1A1A; border-radius: 18px; background: #fff; box-shadow: 0 3px 0 #1A1A1A; display: grid; place-items: center; cursor: grab; touch-action: none; }
.t4-pick img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.t4-pick.is-locked { cursor: default; background: #F3EFE6; border-style: dashed; box-shadow: none; }
.t4-pick.is-locked img { filter: grayscale(1) opacity(.35); }
.t4-tick { background: #3BB273; color: #fff; flex: none; }
.t4-st { position: absolute; transform: translate(-50%, -50%); padding: 0; border: 0; background: none; cursor: grab; touch-action: none; display: grid; place-items: center; min-width: 64px; min-height: 64px; }
.t4-st img { display: block; height: auto; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(26,26,26,.25)); animation: mg-pop .35s cubic-bezier(.2, 1.4, .4, 1) both; }
.t4-st.is-held img { transform: scale(1.08) rotate(-3deg); }
.t4-st.is-leaving { opacity: .4; }
.t3-ghost { position: fixed; z-index: 40; pointer-events: none; transform: translate(-50%, -50%) rotate(-4deg); filter: drop-shadow(0 8px 0 rgba(26,26,26,.25)); }

/* the show (round.show): whatever was put there works for a moment; with calm motion only the glow stays */
.t4-showing .t4-st img, .t4-showing .mg-scene__decor[data-move] { filter: drop-shadow(0 0 8px #FFC531) drop-shadow(0 3px 0 rgba(26,26,26,.25)); }
.t4-st img.t4-move--spin { animation: t4-spin .9s linear infinite; }
.t4-st img.t4-move--whirr { animation: t4-whirr .14s linear infinite; }
.t4-st img.t4-move--boing { animation: t4-boing .55s ease-in-out infinite; transform-origin: 50% 100%; }
.t4-st img.t4-move--ring { animation: t4-ring .45s ease-in-out infinite; transform-origin: 50% 0; }
.t4-st img.t4-move--bob { animation: t4-bob .8s ease-in-out infinite; }
.t4-st img.t4-move--sway { animation: t4-sway 1s ease-in-out infinite; transform-origin: 50% 0; }
.t4-st img.t4-move--glow { animation: t4-glow .8s ease-in-out infinite; }
.mg-scene__decor.t4-move--whirr { animation: t4-whirr-d .14s linear infinite; }
.mg-scene__decor.t4-move--bob { animation: t4-bob-d .8s ease-in-out infinite; }
.mg-scene__decor.t4-move--sway { animation: t4-sway-d 1s ease-in-out infinite; }
.mg-scene__decor.t4-move--glow { animation: t4-glow .8s ease-in-out infinite; }
@keyframes t4-spin { to { transform: rotate(360deg); } }
@keyframes t4-whirr { 25% { transform: translate(-2px, 1px); } 75% { transform: translate(2px, -1px); } }
@keyframes t4-boing { 30% { transform: scaleY(.7); } 60% { transform: scaleY(1.15); } }
@keyframes t4-ring { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
@keyframes t4-bob { 50% { transform: translateY(-8px); } }   /* the same as the decor's, so a hat bobs with its wearer */
@keyframes t4-sway { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
@keyframes t4-glow { 50% { filter: drop-shadow(0 0 14px #FFC531); } }
@keyframes t4-whirr-d { 25% { transform: translate(calc(-50% - 2px), calc(-50% + 1px)); } 75% { transform: translate(calc(-50% + 2px), calc(-50% - 1px)); } }
@keyframes t4-bob-d { 50% { transform: translate(-50%, calc(-50% - 8px)); } }
@keyframes t4-sway-d { 25% { transform: translate(-50%, -50%) rotate(-4deg); } 75% { transform: translate(-50%, -50%) rotate(4deg); } }