/* v7733j pottery: one-color swatches that fit + big clay stage on phones */
#potpal .sw{position:relative;transition:transform .12s}
#potpal .sw.on{outline:4px solid #fff;box-shadow:0 0 0 7px #e85bb8,0 4px 10px #0003!important;transform:scale(1.08);z-index:1}
#potpal .sw.holding::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:4px solid #e85bb8;clip-path:inset(0 100% 0 0);animation:potHold 1s linear forwards}
@keyframes potHold{to{clip-path:inset(0 0 0 0)}}
#potpal .sw.mixed::before{content:'mix';position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);font:800 9px/1 Nunito,sans-serif;color:#fff;text-shadow:0 1px 2px #000a}
#potTip{position:absolute;left:50%;top:10px;transform:translateX(-50%);background:#fffcf8ee;color:#5a2a6a;font:800 15px/1.2 Nunito,sans-serif;padding:8px 14px;border-radius:14px;box-shadow:0 4px 14px #0002;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;text-align:center;z-index:3}
#potTip.show{opacity:1}
#potstage{position:relative}
@media (orientation:portrait),(max-aspect-ratio:1/1){
 html body #pottery.active{display:flex!important;flex-direction:column!important}
 html body #pottery>.bar.top{order:0!important;display:flex!important;flex-direction:row!important;flex:none!important;padding:4px 8px!important;gap:8px!important}
 html body #pottery>.bar.top .ib{width:44px!important;height:44px!important;min-width:44px!important}
 html body #pottery .stage{order:1!important;flex:1 1 0!important;min-height:0!important;width:100%!important}
 html body #pottery #potpal{order:2!important;display:grid!important;grid-template-columns:repeat(7,var(--sw))!important;grid-auto-flow:row!important;justify-content:center!important;
  --sw:clamp(32px,calc((100vw - 28px - 6 * 8px) / 7),46px)!important;gap:8px!important;overflow:visible!important;max-height:none!important;padding:8px 14px calc(8px + env(safe-area-inset-bottom))!important;touch-action:manipulation!important}
 html body #pottery #potpal .sw{width:var(--sw)!important;height:var(--sw)!important;min-width:0!important;flex:none!important;touch-action:manipulation!important;border-radius:50%}
}