main:has(.perechi-play){flex-direction:column;height:auto;min-height:calc(100dvh - 5rem);max-height:none;padding-top:.45rem;padding-bottom:.45rem;display:flex;overflow:auto}main:has(.perechi-play)>header{flex-shrink:0;width:calc(100% - 1.5rem);max-width:72rem;margin-left:auto;margin-right:auto}@media (width>=1024px){main:has(.perechi-play){height:100dvh;min-height:100dvh;max-height:100dvh;padding:.4rem .75rem;overflow:hidden}.perechi-board-slot{min-height:0}}main:has(.perechi-play)>section{flex-direction:column;flex:auto;max-width:none;min-height:0;margin-top:.25rem;padding:.35rem .5rem;display:flex;overflow:hidden}.perechi-play{flex-direction:column;flex:auto;gap:.45rem;min-height:0;display:flex}.perechi-toolbar{flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:.4rem .75rem;display:flex}.perechi-board-slot{flex:auto;place-items:center;width:100%;min-height:min(68dvh,28rem);display:grid;container-type:size}.perechi-board{isolation:isolate;box-sizing:border-box;border:3px solid color-mix(in srgb, var(--perechi-accent,#d97706) 55%, #fff);background:#1e1b4b;border-radius:1.15rem;width:100%;height:100%;padding:clamp(.45rem,1.4vmin,.85rem);position:relative;overflow:hidden;box-shadow:0 18px 40px #4c1d9529,inset 0 0 0 1px #ffffff2e}.perechi-scene{z-index:0;object-fit:cover;object-position:center;width:100%;height:100%;transition:filter .7s,transform 1.1s;position:absolute;inset:0;transform:scale(1.04)}.perechi-board.is-awake .perechi-scene{filter:grayscale(0)saturate(1.08)brightness(1.04);animation:1.15s both perechiBloom;transform:scale(1.08)}.perechi-board[data-back=wood]{border-color:#e8c07a;box-shadow:0 18px 40px #451a0338,inset 0 0 0 1px #fde68a47}.perechi-board[data-back=wood].is-awake .perechi-scene{animation:1.35s both perechiBloom}.perechi-scene-shade{z-index:1;pointer-events:none;background:radial-gradient(circle at 50% 42%,#0000 36%,#0f172a47 100%),linear-gradient(#0f172a1f,#0f172a38);transition:opacity .7s;position:absolute;inset:0}.perechi-board.is-awake .perechi-scene-shade{opacity:.18}.perechi-sparkles{z-index:3;pointer-events:none;opacity:0;position:absolute;inset:0;overflow:hidden}.perechi-board.is-awake .perechi-sparkles{opacity:1}.perechi-sparkles i{width:7px;height:7px;left:calc(8% + (var(--spark) * 7%));top:calc(10% + (var(--spark) * 5.8%));animation:2.6s ease-in-out infinite perechiSpark;animation-delay:calc(var(--spark) * .16s);background:#fde68a;border-radius:999px;position:absolute;box-shadow:0 0 12px 4px #fde68a80}.perechi-grid{z-index:2;grid-template-columns:repeat(var(--perechi-cols,3), minmax(0, 1fr));grid-template-rows:repeat(var(--perechi-rows,3), minmax(0, 1fr));gap:clamp(.42rem,1.6vmin,.95rem);display:grid;position:absolute;inset:clamp(.45rem,1.4vmin,.85rem)}.perechi-board[data-cols="5"] .perechi-grid{gap:clamp(.34rem,1.25vmin,.72rem)}.perechi-board[data-cols="9"] .perechi-grid{gap:clamp(.26rem,1vmin,.55rem)}.perechi-centerpiece{pointer-events:none;place-items:center;width:100%;min-width:0;height:100%;min-height:0;display:grid;position:relative}.perechi-centerpiece-frame{background:radial-gradient(circle at 50% 46%,#0000 34%,#0f172a1a 100%);border-radius:.85rem;width:92%;height:92%;position:relative;box-shadow:inset 0 0 0 3px #fde68a,inset 0 0 0 7px #78350f6b,0 0 18px #fbbf2452}.perechi-centerpiece-ring{border:2px solid #fde68ae6;border-radius:999px;animation:2.8s ease-in-out infinite perechiRingPulse;position:absolute;inset:16%;box-shadow:0 0 14px #fde68a66}.perechi-centerpiece-jewel{background:linear-gradient(145deg,#fde68a73,#d9770647);border:2px solid #fde68a;border-radius:.22rem;width:clamp(.65rem,2vmin,1.05rem);height:clamp(.65rem,2vmin,1.05rem);animation:2.2s ease-in-out infinite perechiJewelPulse;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(45deg);box-shadow:0 0 12px #fde68abf}.perechi-centerpiece[data-theme=wood] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #e8c07a,inset 0 0 0 7px #451a0380,0 0 16px #e8c07a59}.perechi-centerpiece[data-theme=stars] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #c4b5fd,inset 0 0 0 7px #1e1b4b80,0 0 16px #c4b5fd66}.perechi-centerpiece[data-theme=sea] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #7dd3fc,inset 0 0 0 7px #082f4973,0 0 16px #7dd3fc59}.perechi-centerpiece[data-theme=palace] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #f9a8d4,inset 0 0 0 7px #701a7573,0 0 16px #f9a8d459}.perechi-centerpiece[data-theme=pasture] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #bbf7d0,inset 0 0 0 7px #36531473,0 0 16px #bbf7d059}.perechi-centerpiece[data-theme=den] .perechi-centerpiece-frame,.perechi-centerpiece[data-theme=linen] .perechi-centerpiece-frame,.perechi-centerpiece[data-theme=gold] .perechi-centerpiece-frame,.perechi-centerpiece[data-theme=bread] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #fde68a,inset 0 0 0 7px #92400e6b,0 0 16px #fde68a61}.perechi-board.is-awake .perechi-centerpiece-frame{box-shadow:inset 0 0 0 3px #fef3c7,inset 0 0 0 6px #ffffff2e,0 0 26px #fbbf248c}.perechi-board[data-cols="9"] .perechi-centerpiece-frame{box-shadow:inset 0 0 0 2px #fde68a,inset 0 0 0 4px #78350f66,0 0 10px #fbbf2447}.perechi-board[data-cols="9"] .perechi-centerpiece-ring{border-width:1.5px;inset:20%}.perechi-card{perspective:1100px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;background:0 0;border:0;width:100%;min-width:0;height:100%;min-height:0;padding:0;transition:transform .22s cubic-bezier(.2,.85,.3,1.25);position:relative;transform:translateZ(0)}.perechi-card:active:not(:disabled):not(.is-open):not(.is-glass){transform:scale(.92)rotate(-2deg)}.perechi-card.is-open:not(.is-glass),.perechi-card.is-pairing,.perechi-card.is-mismatch{z-index:6}.perechi-card:disabled{cursor:default}.perechi-card.is-glass{pointer-events:none}.perechi-card.is-glass:after{content:"";border-radius:.7rem;transition:opacity .8s,box-shadow .8s;animation:.9s both perechiWindow;position:absolute;inset:2px;box-shadow:inset 0 0 0 2px #fde68a8c,0 0 18px #fbbf2447}.perechi-board.is-awake .perechi-card.is-glass:after{opacity:.2;box-shadow:inset 0 0 0 1px #fde68a33}.perechi-card.is-pairing:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle,#fbbf2480 0%,#fbbf241f 42%,#0000 72%);border-radius:1.15rem;animation:.85s ease-out both perechiHalo;position:absolute;inset:-12%}.perechi-card.is-mismatch:before{content:"";z-index:0;pointer-events:none;background:radial-gradient(circle,#f43f5e61 0%,#0000 68%);border-radius:1.05rem;animation:.7s ease-out both perechiNopeHalo;position:absolute;inset:-8%}.perechi-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .62s cubic-bezier(.18,.89,.32,1.28),opacity .5s;display:block;position:relative}.perechi-card.is-open .perechi-card-inner,.perechi-board.is-peeking .perechi-card:not(.is-glass) .perechi-card-inner{transform:rotateY(180deg)}.perechi-card.is-open:not(.is-glass):not(.is-pairing):not(.is-mismatch) .perechi-card-inner{animation:.62s cubic-bezier(.18,.89,.32,1.28) both perechiFlipPop}.perechi-card.is-pairing .perechi-card-inner{animation:.85s cubic-bezier(.2,.8,.25,1.25) both perechiMatchBounce}.perechi-card.is-mismatch .perechi-card-inner{animation:.78s both perechiNope}.perechi-card.is-glass .perechi-card-inner{opacity:0;animation:.55s both perechiPoof;transform:rotateY(180deg)scale(.55)}.perechi-card-back,.perechi-card-front{backface-visibility:hidden;border-radius:.72rem;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.perechi-card-back{color:#fde68a;overflow:hidden;box-shadow:0 4px #2f190c8c,0 8px 14px #2f190c38}.perechi-card-back:before{content:"";pointer-events:none;background:linear-gradient(115deg,#0000 35%,#ffffff38 50%,#0000 65%);position:absolute;inset:0;transform:translate(-120%)}.perechi-card:active:not(.is-open):not(.is-glass) .perechi-card-back:before{animation:.7s perechiShine}.perechi-card-back:after{content:"";opacity:.9;border:2px solid;border-radius:.28rem;width:.85rem;height:.85rem;transition:transform .35s,box-shadow .35s;transform:rotate(45deg);box-shadow:0 0 12px}.perechi-card:active:not(.is-open):not(.is-glass) .perechi-card-back:after{transform:rotate(45deg)scale(1.18);box-shadow:0 0 18px}@media (hover:hover){.perechi-card:hover:not(:disabled):not(.is-glass){z-index:4;transform:translateY(-3px)scale(1.03)}.perechi-card:hover:not(.is-open):not(.is-glass) .perechi-card-back:before{animation:.7s perechiShine}.perechi-card:hover:not(.is-open):not(.is-glass) .perechi-card-back:after{transform:rotate(45deg)scale(1.18);box-shadow:0 0 18px}}.perechi-card-front{color:#5a355e;background:linear-gradient(165deg,#fffaf0,#ffe7ad);border:2px solid #fff8e7;flex-direction:column;gap:.08rem;padding:.18rem;transform:rotateY(180deg);box-shadow:0 4px #deb86a,0 8px 14px #57385e2e}.perechi-card.is-pairing .perechi-card-front{border-color:#fde68a;animation:.85s both perechiMatchGlow;box-shadow:0 4px #d97706,0 0 22px #fbbf24a6}.perechi-card.is-mismatch .perechi-card-front{border-color:#fb7185;box-shadow:0 4px #e11d48,0 0 16px #f43f5e66}.perechi-card-fx{z-index:5;pointer-events:none;backface-visibility:hidden;position:absolute;inset:0;transform:rotateY(180deg)}.perechi-card-fx i{opacity:0;background:#fde68a;border-radius:999px;width:.42rem;height:.42rem;position:absolute;top:50%;left:50%;box-shadow:0 0 8px #fbbf24}.perechi-card.is-pairing .perechi-card-fx i{animation:.8s ease-out both perechiStarBurst;animation-delay:calc(var(--fx) * 35ms)}.perechi-card.is-mismatch .perechi-card-fx i{background:#fb7185;animation:.62s ease-out both perechiPuff;box-shadow:0 0 8px #f43f5e}.perechi-card-fx i:first-child{--dx:-1.7rem;--dy:-.35rem}.perechi-card-fx i:nth-child(2){--dx:1.65rem;--dy:-.55rem}.perechi-card-fx i:nth-child(3){--dx:-.2rem;--dy:-1.7rem}.perechi-card-fx i:nth-child(4){--dx:.15rem;--dy:1.65rem}.perechi-card-fx i:nth-child(5){--dx:-1.35rem;--dy:1.2rem}.perechi-card-fx i:nth-child(6){--dx:1.4rem;--dy:1.15rem}.perechi-card-fx i:nth-child(7){--dx:-1.25rem;--dy:-1.3rem}.perechi-card-fx i:nth-child(8){--dx:1.3rem;--dy:-1.25rem}.perechi-card-face{object-fit:contain;pointer-events:none;filter:drop-shadow(0 3px 6px #57385e2e);width:78%;height:68%;max-height:none}.perechi-card-emoji{font-size:clamp(.85rem,2.4vmin,1.7rem);line-height:1}.perechi-card-label{text-overflow:ellipsis;white-space:nowrap;max-width:100%;font-size:clamp(.48rem,1.05vmin,.68rem);font-weight:900;overflow:hidden}.perechi-board[data-cols="9"] .perechi-card-label{display:none}.perechi-board[data-cols="9"] .perechi-card-front{padding:.1rem}.perechi-board[data-cols="9"] .perechi-card-face{width:82%;height:82%}.perechi-board[data-cols="9"] .perechi-card-emoji{font-size:clamp(.72rem,1.8vmin,1.15rem)}.perechi-card-back[data-theme=wood]{color:#fde68a;background:repeating-linear-gradient(92deg,#3e200e29 0 2px,#0000 2px 8px),repeating-linear-gradient(0deg,#ffe0aa14 0 12px,#0000 12px 24px),linear-gradient(145deg,#a16207,#7c2d12 58%,#451a03);border:2px solid #e8c07a;box-shadow:0 4px #3f1d0a,0 14px 24px #451a0347}.perechi-card-back[data-theme=stars]{color:#fde68a;background:radial-gradient(circle,#ffffffe6 0 1.1px,#0000 1.6px) 0 0/16px 18px,radial-gradient(circle,#fde68ab3 0 1px,#0000 1.4px) 8px 10px/22px 20px,linear-gradient(145deg,#312e81,#1e1b4b 60%,#4c1d95);border:2px solid #c4b5fd;box-shadow:0 4px #1e1b4b,0 14px 24px #1e1b4b4d}.perechi-card-back[data-theme=linen]{color:#fef3c7;background:repeating-linear-gradient(90deg,#ffffff14 0 3px,#0000 3px 8px),linear-gradient(145deg,#b45309,#92400e 55%,#78350f);border:2px solid #fde68a;box-shadow:0 4px #78350f,0 14px 24px #78350f47}.perechi-card-back[data-theme=sea]{color:#e0f2fe;background:radial-gradient(circle at 20% 20%,#ffffff2e,#0000 32%),repeating-linear-gradient(#ffffff14 0 6px,#0000 6px 14px),linear-gradient(145deg,#0284c7,#0f766e 62%,#164e63);border:2px solid #7dd3fc;box-shadow:0 4px #164e63,0 14px 24px #082f4947}.perechi-card-back[data-theme=palace]{color:#fce7f3;background:repeating-linear-gradient(45deg,#ffffff14 0 8px,#0000 8px 16px),linear-gradient(145deg,#be185d,#9d174d 55%,#701a75);border:2px solid #f9a8d4;box-shadow:0 4px #701a75,0 14px 24px #701a7547}.perechi-card-back[data-theme=pasture]{color:#ecfccb;background:radial-gradient(circle at 80% 20%,#fef08a59,#0000 28%),linear-gradient(145deg,#65a30d,#3f6212 60%,#365314);border:2px solid #bbf7d0;box-shadow:0 4px #365314,0 14px 24px #36531447}.perechi-card-back[data-theme=den]{color:#fde68a;background:radial-gradient(circle at 50% 120%,#00000047,#0000 46%),linear-gradient(145deg,#b45309,#7c2d12 58%,#1c1917);border:2px solid #fcd34d;box-shadow:0 4px #1c1917,0 14px 24px #1c191752}.perechi-card-back[data-theme=gold]{color:#fffbeb;background:radial-gradient(circle at 30% 20%,#ffffff59,#0000 26%),linear-gradient(145deg,#f59e0b,#d97706 52%,#92400e);border:2px solid #fde68a;box-shadow:0 4px #92400e,0 14px 24px #92400e47}.perechi-card-back[data-theme=bread]{color:#fef9c3;background:radial-gradient(circle at 50% 30%,#fff3,#0000 34%),linear-gradient(145deg,#ca8a04,#a16207 55%,#854d0e);border:2px solid #fde68a;box-shadow:0 4px #854d0e,0 14px 24px #854d0e47}.perechi-whisper{z-index:4;color:#fff7ed;text-align:center;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0f172ac7;border:2px solid #fde68ab3;border-radius:999px;max-width:calc(100% - 1.4rem);padding:.45rem .85rem;font-size:clamp(.72rem,1.6vw,.92rem);font-weight:800;line-height:1.3;animation:.45s both perechiWhisper;position:absolute;bottom:.7rem;left:50%;transform:translate(-50%)}.perechi-card:focus-visible{outline-offset:3px;z-index:5;outline:4px solid #fbbf24}@keyframes perechiFlipPop{0%{transform:rotateY(90deg)scale(.92)translateY(6px)}58%{transform:rotateY(188deg)scale(1.08)translateY(-4px)}to{transform:rotateY(180deg)scale(1)translateY(0)}}@keyframes perechiMatchBounce{0%{transform:rotateY(180deg)scale(1)}30%{transform:rotateY(180deg) translate3d(calc(var(--lean-x,0) * 10px), calc(var(--lean-y,0) * 7px), 0) scale(1.16)}58%{transform:rotateY(180deg) translate3d(calc(var(--lean-x,0) * 7px), calc(var(--lean-y,0) * 5px), 0) scale(.95)}to{transform:rotateY(180deg) translate3d(calc(var(--lean-x,0) * 6px), calc(var(--lean-y,0) * 4px), 0) scale(1.06)}}@keyframes perechiMatchGlow{0%,to{filter:brightness()}40%{filter:brightness(1.18)saturate(1.2)}}@keyframes perechiHalo{0%{opacity:0;transform:scale(.55)}40%{opacity:1;transform:scale(1.08)}to{opacity:.35;transform:scale(1.18)}}@keyframes perechiNope{0%,to{transform:rotateY(180deg)rotate(0)scale(1)}12%{transform:rotateY(180deg)rotate(-10deg)translate(-8px)scale(1.04)}28%{transform:rotateY(180deg)rotate(10deg)translate(8px)}44%{transform:rotateY(180deg)rotate(-7deg)translate(-5px)}62%{transform:rotateY(180deg)rotate(5deg)translate(4px)}80%{transform:rotateY(180deg)scale(.92)}}@keyframes perechiNopeHalo{0%{opacity:.85;transform:scale(.7)}to{opacity:0;transform:scale(1.2)}}@keyframes perechiStarBurst{0%{opacity:1;transform:translate(-50%,-50%)scale(.35)}70%{opacity:1}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15)}}@keyframes perechiPuff{0%{opacity:.95;transform:translate(-50%,-50%)scale(.4)}to{opacity:0;transform:translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.4)}}@keyframes perechiPoof{0%{opacity:1;transform:rotateY(180deg)scale(1.08)}to{opacity:0;transform:rotateY(180deg)scale(.55)}}@keyframes perechiShine{0%{transform:translate(-120%)}to{transform:translate(120%)}}@keyframes perechiJewelPulse{0%,to{transform:translate(-50%,-50%)rotate(45deg)scale(1);box-shadow:0 0 12px #fde68abf}50%{transform:translate(-50%,-50%)rotate(45deg)scale(1.18);box-shadow:0 0 20px #fde68a}}@keyframes perechiRingPulse{0%,to{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}@keyframes perechiWindow{0%{opacity:0;transform:scale(.86)}to{opacity:1;transform:scale(1)}}@keyframes perechiWhisper{0%{opacity:0;transform:translate(-50%)translateY(8px)}to{opacity:1;transform:translate(-50%)translateY(0)}}@keyframes perechiSpark{0%,to{opacity:.2;transform:scale(.55)}50%{opacity:1;transform:scale(1.3)}}@keyframes perechiBloom{0%{filter:grayscale(.2)saturate(.85)brightness(.9)}55%{filter:grayscale(0)saturate(1.18)brightness(1.08)}to{filter:grayscale(0)saturate(1.08)brightness(1.04)}}@media (prefers-reduced-motion:reduce){.perechi-scene,.perechi-card,.perechi-card-inner,.perechi-card.is-glass:after,.perechi-card.is-pairing:before,.perechi-card.is-mismatch:before,.perechi-card-fx i,.perechi-card-back:before,.perechi-centerpiece-jewel,.perechi-centerpiece-ring,.perechi-whisper,.perechi-sparkles i,.perechi-board.is-awake .perechi-scene{transition:none!important;animation:none!important}.perechi-card.is-open .perechi-card-inner,.perechi-board.is-peeking .perechi-card:not(.is-glass) .perechi-card-inner,.perechi-card.is-pairing .perechi-card-inner,.perechi-card.is-glass .perechi-card-inner{transform:rotateY(180deg)}.perechi-card.is-mismatch .perechi-card-inner{animation:none}}