/* ---------- PAIRS ---------- */
.cab[data-world="pairs"]{--w1:#FFF1BF;--w2:#FFCB57}
.cab[data-world="pairs"] .cab-world{background:
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.5) 3px,transparent 3.6px) 0 0/44px 44px,
  repeating-linear-gradient(45deg,rgba(26,16,51,.035) 0 2px,transparent 2px 22px),
  repeating-linear-gradient(-45deg,rgba(26,16,51,.035) 0 2px,transparent 2px 22px)}

.pairs-game{position:absolute;inset:0;container-type:size;container-name:pairs}
.pairs-wrap{position:absolute;inset:0;display:grid;place-items:center;padding:4px 14px 112px}
.pairs-board{position:relative;display:grid;--gap:clamp(8px,2.2cqmin,16px);gap:var(--gap);
  --cw:min(calc((100cqw - 28px - 2 * var(--gap)) / 3),calc((100cqh - 120px - 3 * var(--gap)) / 4 * .77),150px);
  grid-template-columns:repeat(3,var(--cw))}
@container pairs (orientation:landscape){
  .pairs-wrap{padding:12px 120px 30px}
  .pairs-board{--cw:min(calc((100cqw - 240px - 3 * var(--gap)) / 4),calc((100cqh - 64px - 2 * var(--gap)) / 3 * .77),178px);grid-template-columns:repeat(4,var(--cw))}
}

.pairs-card{position:relative;width:var(--cw);aspect-ratio:100/130;padding:0;border:0;background:none;border-radius:16px;perspective:800px;cursor:pointer;touch-action:manipulation;
  animation:pcDeal .55s var(--spring) backwards;animation-delay:calc(var(--i) * 45ms);transition:transform .2s var(--spring)}
@keyframes pcDeal{from{transform:translateY(-40px) scale(.4) rotate(-12deg);opacity:0}}
.pairs-card:hover:not(.up){transform:translateY(-5px) rotate(-1.5deg)}
.pairs-card:active:not(.up){transform:scale(.96)}
.pairs-card:focus-visible{outline:4px solid var(--grape);outline-offset:4px}
.pc-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .5s var(--spring)}
.pairs-card.up .pc-in{transform:rotateY(180deg)}
.pc-face{position:absolute;inset:0;display:grid;place-items:center;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:var(--bd);border-radius:clamp(12px,2.4cqmin,18px);box-shadow:0 4px 0 var(--ink);overflow:hidden}
.pc-face svg{display:block;width:100%;height:100%}
.pc-back{background:
  radial-gradient(circle at 50% 50%,rgba(255,255,255,.22) 2.6px,transparent 3.2px) 0 0/16px 16px,
  linear-gradient(160deg,#7C52FF,#5A2EE6)}
.pc-back::after{content:"";position:absolute;inset:6px;border:2.5px dashed rgba(255,255,255,.4);border-radius:10px}
.pc-back svg{position:relative;z-index:1;width:84%;height:84%}
.pc-front{transform:rotateY(180deg);background:#FFF8EA}
.pc-front svg{width:92%;height:92%}

.pairs-card.got{cursor:default;animation:pcGot .55s var(--spring)}
.pairs-card.got .pc-front{background:#E3FFF2;box-shadow:0 0 0 4px var(--mint),0 4px 0 var(--ink)}
@keyframes pcGot{40%{transform:scale(1.1) rotate(-3deg)}70%{transform:scale(.97)}}
.pairs-hand{width:clamp(40px,10cqmin,56px)}

/* calm: no flip motion */
.pairs-game.calm .pc-in{transition:none}
.pairs-game.calm .pairs-card,.pairs-game.calm .pairs-card.got{animation:none}

@media (prefers-reduced-motion:reduce){.pc-in{transition:none}.pairs-card{animation:none}}