:root { --glow: #c86bff; --accent: #ff8bd0; --accent-deep: #a3237a; }
.home-round { display: grid; place-items: center; text-decoration: none; }
.stage-wrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 4px 12px; }
.stage { height: 100%; aspect-ratio: 100 / 140; max-width: 100%; border-radius: 26px; overflow: hidden; box-shadow: 0 0 0 7px #fff4, var(--drop); background: #fff; }
.stage svg { width: 100%; height: 100%; display: block; }
.stage .worn text { cursor: pointer; }
.stage .worn .new { animation: plop .45s var(--spring); transform-box: fill-box; transform-origin: center; }
@keyframes plop { from { transform: scale(.2); } }
.stage .pal.hop { animation: hop .5s var(--spring); transform-box: fill-box; transform-origin: bottom center; }
.hint { min-height: 1.6em; margin: 2px 12px; }
.wardrobe { width: 100%; background: rgba(255,255,255,.12); border-top: 2px solid rgba(255,255,255,.25); padding-bottom: 10px; }
.tabs { display: flex; gap: 6px; overflow-x: auto; padding: 8px 10px 4px; scrollbar-width: none; justify-content: safe center; }
.tabs::-webkit-scrollbar, .items::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; border: 0; border-radius: 999px; padding: 6px 14px; font-size: 1rem; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; min-height: 44px; }
.tab.on { background: var(--pill); color: var(--ink); box-shadow: var(--shine); }
.items { display: flex; gap: 10px; overflow-x: auto; padding: 8px 12px 6px; scrollbar-width: none; justify-content: safe center; }
.items .thing { flex: 0 0 auto; cursor: pointer; touch-action: manipulation; width: 82px; min-height: 82px; }
.items .thing.on { outline: 5px solid var(--accent); }
.flash { position: fixed; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 70; }
.flash.go { animation: flash .5s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.polaroid { background: #fff; padding: 10px 10px 34px; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,.25); width: min(60vw, 240px); margin: 0 auto; transform: rotate(-3deg); }
.polaroid img { width: 100%; display: block; border-radius: 4px; aspect-ratio: 100/140; background: #eee; }
a.big-btn { text-decoration: none; color: var(--ink); display: inline-block; }
@media (max-height: 640px) { .items .thing { width: 66px; min-height: 66px; } .items .thing .label { display: none; } }