/* 미타픽 — 판 공용 스타일 */
.pb-stage{display:flex;align-items:center;justify-content:center;gap:28px;width:max-content}
.pb-stage.pb-R{flex-direction:row-reverse}
.pb-bw{position:relative;font-size:calc(var(--cs)*.3)}
.pb-title{text-align:center;font-family:var(--font);color:var(--title);font-size:calc(var(--cs)*.46);margin-bottom:calc(var(--cs)*.16);line-height:1.15;word-break:keep-all;max-width:calc(var(--cs)*12)}
.pb-title:empty{display:none}
.pb-board{position:relative;display:grid;gap:var(--gap);padding:calc(var(--cs)*.24);border-radius:var(--r);background:var(--frameBg);border:var(--bw2) solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.pb-board.pb-glass{backdrop-filter:blur(8px)}
.pb-board.pb-glow{box-shadow:0 0 22px var(--border),inset 0 0 26px color-mix(in srgb,var(--border) 25%,transparent)}
.pb-board.pb-tape:before,.pb-board.pb-tape:after{content:"";position:absolute;width:calc(var(--cs)*1.1);height:calc(var(--cs)*.32);background:rgba(255,240,200,.7);top:calc(var(--cs)*-.12);box-shadow:0 1px 2px rgba(0,0,0,.15);z-index:2}
.pb-board.pb-tape:before{left:calc(var(--cs)*-.25);transform:rotate(-32deg)}
.pb-board.pb-tape:after{right:calc(var(--cs)*-.25);transform:rotate(32deg)}
.pb-board.pb-bgimg{background-size:cover !important;background-position:center !important}
.pb-cell{width:var(--cs);height:var(--cs);position:relative;border-radius:var(--cr);cursor:pointer;perspective:300px}
.pb-cell.pb-cb{background:color-mix(in srgb,var(--cell) var(--cellA),transparent);box-shadow:inset 0 -2px 0 rgba(0,0,0,.08)}
.pb-board.pb-glow .pb-cell.pb-cb{box-shadow:0 0 7px color-mix(in srgb,var(--c1) 45%,transparent)}
.pb-cell:not(.pb-open):hover .pb-cover{transform:scale(1.07)}
.pb-cell.pb-open{cursor:default}
.pb-cover{position:absolute;inset:4%;transition:transform .12s}
.pb-cover svg{width:100%;height:100%;display:block;overflow:visible}
.pb-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--nfont);color:var(--ct);font-size:calc(var(--cs)*.3)}
.pb-board.pb-glow .pb-n{text-shadow:0 0 6px var(--c1)}
.pb-face{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;font-family:var(--font);color:var(--win);font-size:calc(var(--cs)*.2);line-height:1.12;padding:3px;word-break:keep-all;overflow-wrap:anywhere;opacity:0}
.pb-board.pb-glow .pb-face{text-shadow:0 0 6px var(--win)}
.pb-cell.pb-lose .pb-face{color:var(--lose);text-shadow:none}
.pb-cell.pb-open .pb-face{animation:pbFace .35s .15s forwards}
.pb-cell.pb-open.pb-won{box-shadow:0 0 0 2px var(--win) inset}
.pb-cell.pb-static .pb-face{animation:none;opacity:1}
.pb-cell.pb-static .pb-cover{display:none}
@keyframes pbFace{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
.pb-o-pop{animation:pbPop .35s forwards}@keyframes pbPop{to{transform:scale(1.5);opacity:0}}
.pb-o-flip{animation:pbFlip .25s ease-in forwards}@keyframes pbFlip{to{transform:rotateY(90deg)}}
.pb-o-peel{animation:pbPeel .55s ease-in forwards;transform-origin:0 0}@keyframes pbPeel{30%{transform:rotate(-12deg)}to{transform:translate(25%,90%) rotate(40deg);opacity:0}}
.pb-o-burst{animation:pbBurst .3s forwards}@keyframes pbBurst{45%{transform:scale(1.3)}to{transform:scale(0);opacity:0}}
.pb-o-drop{animation:pbDrop .5s ease-in forwards}@keyframes pbDrop{20%{transform:translateY(-12%)}to{transform:translateY(160%) rotate(-25deg);opacity:0}}
.pb-o-crack{animation:pbCrack .5s forwards}@keyframes pbCrack{0%,40%{transform:rotate(0)}10%{transform:rotate(-8deg)}20%{transform:rotate(8deg)}30%{transform:rotate(-6deg)}to{transform:scale(1.2);opacity:0;filter:blur(2px)}}
.pb-left{text-align:center;font-family:var(--font);color:var(--title);opacity:.85;margin-top:calc(var(--cs)*.12);font-size:calc(var(--cs)*.2)}
.pb-pop{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%) scale(.3);opacity:0;pointer-events:none;z-index:20;text-align:center;padding:.9em 1.6em;border-radius:var(--r);min-width:8.5em;background:var(--pop);color:var(--popTxt);border:calc(var(--bw2) + 2px) solid var(--border);box-shadow:0 18px 40px rgba(0,0,0,.45);font-family:var(--font);transition:transform .45s cubic-bezier(.2,1.6,.4,1),opacity .2s}
.pb-pop.pb-glow{box-shadow:0 0 30px var(--border)}
.pb-pop.pb-show{transform:translate(-50%,-50%) scale(1);opacity:1}
.pb-pk{font-size:.55em;letter-spacing:.35em;opacity:.8}
.pb-pn{font-size:1.75em;line-height:1.1;margin:.1em 0;white-space:nowrap}
.pb-pc{font-size:.5em;opacity:.7}
.pb-pop.pb-lp{color:var(--lose)}
.pb-shake{animation:pbSh .35s}@keyframes pbSh{20%{transform:translate(-4px,2px)}40%{transform:translate(4px,-2px)}60%{transform:translate(-3px,1px)}80%{transform:translate(2px,-1px)}}
.pb-promo{max-width:300px;padding:20px 22px;border-radius:var(--r);background:var(--promo);color:var(--promoTxt);border:var(--bw2) solid var(--border);font-family:var(--font)}
.pb-pt{font-size:30px;line-height:1.2;margin-bottom:10px;color:var(--popTxt);word-break:keep-all}
.pb-pt:empty{display:none}
.pb-pl{font-family:'Noto Sans KR',sans-serif;font-size:15px;line-height:1.7;white-space:pre-line;word-break:keep-all}
canvas.pb-fx{position:fixed;inset:0;pointer-events:none;z-index:9999}