.emotionPuzzlePage{color:#382f45;background:radial-gradient(circle at 8% 7%,#ffd94d6b,#0000 21%),radial-gradient(circle at 94% 12%,#89dac159,#0000 23%),linear-gradient(145deg,#fffaf0,#f4f2ff 55%,#ecfbff);min-height:100dvh;padding:clamp(10px,1.7vw,22px)}.emotionPuzzleShell{width:min(1500px,100%);margin:0 auto}.emotionPuzzleHeader{grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;margin-bottom:12px;display:grid}.emotionPuzzleHeader>div:nth-child(2){text-align:center}.emotionPuzzleHeader h1{color:#6647a8;margin:1px 0 0;font-size:clamp(1.65rem,3.5vw,2.65rem);line-height:1.05}.emotionPuzzleHeader>div>span{color:#766b82;letter-spacing:.1em;font-size:.78rem;font-weight:900}.emotionPuzzleBack{color:#5f5470;justify-self:start;font-weight:900;text-decoration:none}.emotionPuzzleProgress{background:#ffffffdb;border:2px solid #d9ccef;border-radius:16px;justify-self:end;align-items:baseline;gap:5px;padding:9px 15px;display:flex}.emotionPuzzleProgress strong{color:#6a48b4;font-size:1.45rem}.emotionPuzzleProgress span{color:#756a7c;font-weight:900}.emotionPuzzleSetup{background:#ffffffe6;border:3px solid #eadff5;border-radius:23px;grid-template-columns:minmax(210px,320px) minmax(0,1fr);gap:18px;margin-bottom:12px;padding:18px;display:grid;box-shadow:0 10px 28px #53416917}.emotionSetupPreview{align-content:start;gap:8px;display:grid}.emotionSetupPreview img{aspect-ratio:1;object-fit:cover;border:4px solid #fff;border-radius:18px;width:100%;display:block;box-shadow:0 9px 24px #3d2d4b33}.emotionSetupPreview span{color:#65546f;text-align:center;font-weight:900}.emotionSetupOptions{align-content:center;gap:16px;min-width:0;display:grid}.emotionChoiceBlock,.gridChoiceBlock{gap:8px;display:grid}.emotionChoiceBlock>strong,.gridChoiceBlock>strong{color:#574467;font-size:.86rem}.emotionChoices{grid-template-columns:repeat(8,minmax(72px,1fr));gap:7px;display:grid}.emotionChoices button{color:#4e4358;cursor:pointer;background:#fff;border:2px solid #e5dcea;border-radius:13px;grid-template-columns:42px 1fr;align-items:center;gap:6px;min-height:48px;padding:4px 8px 4px 4px;font-weight:900;display:grid;position:relative;overflow:hidden}.emotionChoices img{object-fit:cover;border-radius:9px;width:40px;height:40px;display:block}.emotionChoices button:hover,.emotionChoices button:focus-visible{border-color:#9b7cce;transform:translateY(-1px)}.emotionChoices button.isSelected{background:#f0e9ff;border-color:#7251ae;box-shadow:0 0 0 3px #7550b41f}.gridChoiceBlock{min-width:236px}.gridChoices{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.gridChoices button{color:#5f4e70;cursor:pointer;background:#fff;border:2px solid #d8c9e9;border-radius:13px;min-height:48px;padding:8px 12px;font-size:1rem;font-weight:1000}.gridChoices button.isSelected{color:#fff;background:#7151ae;border-color:#7151ae;box-shadow:0 5px #4c347a}.emotionPuzzleStart{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8060c5,#5b3d9d);border:0;border-radius:15px;min-height:52px;padding:11px 24px;font-size:1.08rem;font-weight:1000;box-shadow:0 6px #3f2872}.emotionPuzzleStart:active{transform:translateY(4px);box-shadow:0 2px #3f2872}.emotionPuzzlePlay{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:14px;display:grid}.pieceTrayPanel,.targetBoardPanel{background:#ffffffeb;border:3px solid #d9e2ee;border-radius:24px;min-width:0;padding:13px;box-shadow:0 14px 36px #3830481c}.pieceTrayPanel{border-color:#f1d8a0}.targetBoardPanel{border-color:#c9dfdc}.puzzlePanelHeading{justify-content:space-between;align-items:center;gap:10px;min-height:38px;margin-bottom:8px;display:flex}.puzzlePanelHeading div{align-items:baseline;gap:8px;display:flex}.puzzlePanelHeading span{color:#9b6d1d;letter-spacing:.1em;font-size:.74rem;font-weight:1000}.targetBoardPanel .puzzlePanelHeading span{color:#2a7b71}.puzzlePanelHeading h2{margin:0;font-size:clamp(1rem,2vw,1.3rem)}.puzzlePanelHeading button{color:#735518;cursor:pointer;background:#fff8df;border:2px solid #e2c786;border-radius:11px;min-height:35px;padding:6px 11px;font-weight:900}.puzzlePanelHeading small{color:#776e7c;font-weight:700}.pieceTray{background:#fff8e9;border-radius:16px;align-content:start;gap:clamp(3px,.45vw,6px);min-height:min(42vw,650px);padding:8px;display:grid;position:relative}.puzzlePiece,.targetSlot.isFilled,.draggingPiece{background-image:var(--piece-image);background-repeat:no-repeat;background-position:var(--piece-x) var(--piece-y);background-size:calc(var(--piece-columns) * 100%) calc(var(--piece-rows) * 100%)}.puzzlePiece{aspect-ratio:var(--piece-ratio);cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;border:2px solid #fff;border-radius:6px;min-width:0;padding:0;transition:transform .15s,outline-color .15s,opacity .15s;box-shadow:0 3px 7px #372a1f33}.puzzlePiece:hover,.puzzlePiece:focus-visible{z-index:2;outline-offset:1px;outline:3px solid #ffbd3d;transform:scale(1.05)}.puzzlePiece.isSelected{z-index:3;outline-offset:1px;outline:4px solid #754db3;transform:scale(1.06)}.puzzlePiece:active{cursor:grabbing}.emptyTray{color:#8b6c31;text-align:center;grid-column:1/-1;align-self:center;margin:0;font-size:1.2rem;font-weight:1000}.targetBoard{isolation:isolate;aspect-ratio:1;background:#eaf4f2;border:4px solid #3e8d83;border-radius:16px;width:100%;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 0 0 2px #fff,0 8px 18px #2a5b552b}.targetBoard:before{z-index:-1;background-image:var(--target-image);content:"";opacity:.13;background-position:50%;background-size:cover;position:absolute;inset:0}.targetSlot{color:#2a5f587a;cursor:pointer;background-color:#ffffff14;border:1px dashed #31686173;border-radius:0;min-width:0;min-height:0;padding:0;position:relative}.targetSlot>span{place-items:center;font-size:clamp(.45rem,.8vw,.75rem);font-weight:900;display:grid;position:absolute;inset:0}.targetSlot:hover,.targetSlot:focus-visible{z-index:2;outline-offset:-3px;background-color:#dbf5ff5c;outline:3px solid #65a9c0}.targetSlot.isOver{z-index:3;outline-offset:-4px;background-color:#ffef9d85;outline:4px solid #ffca38}.targetSlot.isOverOccupied{z-index:3;outline-offset:-4px;filter:brightness(.88);outline:4px solid #b6a8c4}.targetSlot.isWrongAfterCheck{z-index:3;outline-offset:-5px;outline:5px solid #e94f72;animation:.24s ease-in-out both wrongSlotShake}.targetSlot.isFilled{color:#0000;border-style:solid}.targetSlot.isFilled:hover,.targetSlot.isFilled:focus-visible{filter:brightness(.88)}.puzzleActionBar{background:#fffffff0;border:3px solid #eadff5;border-radius:19px;grid-template-columns:1fr auto;align-items:center;gap:14px;margin-top:12px;padding:10px 12px 10px 18px;display:grid;box-shadow:0 10px 24px #44345617}.puzzleActionBar p{color:#5c5067;min-height:24px;margin:0;font-weight:900}.puzzleActionBar button,.puzzleSuccessInner>button{color:#fff;cursor:pointer;background:linear-gradient(135deg,#8060c5,#5b3d9d);border:0;border-radius:14px;min-height:48px;padding:10px 25px;font-size:1.05rem;font-weight:1000;box-shadow:0 6px #3f2872}.puzzleActionBar button:disabled{cursor:not-allowed;background:#c7c0d2;box-shadow:0 5px #9991a5}.puzzleActionBar button:not(:disabled):active,.puzzleSuccessInner>button:active{transform:translateY(4px);box-shadow:0 2px #3f2872}.draggingPiece{z-index:1000;width:clamp(70px,9vw,118px);aspect-ratio:var(--piece-rows) / var(--piece-columns);pointer-events:none;border:3px solid #fff;border-radius:8px;position:fixed;transform:translate(-50%,-60%)rotate(-3deg);box-shadow:0 16px 28px #251b2f59}.draggingPiece.isOverBoard{outline:5px solid #ffcc3d;transform:translate(-50%,-60%)scale(.88)rotate(2deg)}.draggingPiece.isOverOccupied{outline:5px solid #b6a8c4;transform:translate(-50%,-60%)rotate(-5deg)}.puzzleSuccessDialog{background:0 0;border:0;border-radius:28px;width:min(500px,100% - 28px);max-height:calc(100dvh - 28px);margin:0;padding:0;position:fixed;inset:50% auto auto 50%;overflow:visible;transform:translate(-50%,-50%)}.puzzleSuccessDialog::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#30233e9e}.puzzleSuccessInner{z-index:2;text-align:center;background:#fffdf7;border:5px solid #ffd75b;border-radius:28px;justify-items:center;padding:25px;display:grid;position:relative;box-shadow:0 24px 90px #2b1c3961}.puzzleSuccessInner h2{color:#6842aa;margin:7px 0 3px;font-size:clamp(1.8rem,5vw,2.45rem)}.puzzleSuccessInner p{color:#675b6e;margin:6px 0 14px;font-weight:900}.puzzleSuccessInner img{border:5px solid #fff;border-radius:18px;width:min(230px,58vw);margin-bottom:15px;display:block;box-shadow:0 9px 24px #35274233}.puzzleSuccessInner>button{width:min(280px,100%)}.puzzleSuccessInner>a{color:#655078;margin-top:15px;font-weight:900}.successStars{color:#ffc826;letter-spacing:.18em;text-shadow:0 3px #e59a20;font-size:2.2rem;animation:.75s cubic-bezier(.2,1.6,.35,1) both puzzleStars}.confetti{z-index:1;pointer-events:none;position:fixed;inset:-18vh 0 0;overflow:hidden}.confetti i{left:var(--confetti-x);background:var(--confetti-color);width:11px;height:21px;animation:confettiFall 2.4s var(--confetti-delay) ease-in infinite;border-radius:3px;position:absolute;top:-20px}@keyframes confettiFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:.2;transform:translateY(120vh) rotate(var(--confetti-turn))}}@keyframes puzzleStars{0%{opacity:0;transform:scale(.3)rotate(-12deg)}70%{transform:scale(1.25)rotate(5deg)}to{opacity:1;transform:scale(1)}}@keyframes wrongSlotShake{0%,to{transform:translate(0)}35%{transform:translate(-3px)}70%{transform:translate(3px)}}button:focus-visible,.emotionPuzzleBack:focus-visible,.puzzleSuccessInner a:focus-visible{outline-offset:3px;outline:4px solid #3a97b659}@media (width<=1100px){.emotionChoices{grid-template-columns:repeat(4,minmax(80px,1fr))}.pieceTray{min-height:0}}@media (width<=760px){.emotionPuzzleHeader{grid-template-columns:1fr auto}.emotionPuzzleHeader>div:nth-child(2){grid-area:1/1/auto/-1}.emotionPuzzleBack,.emotionPuzzleProgress{grid-row:2}.emotionPuzzleSetup{grid-template-columns:1fr}.emotionSetupPreview{justify-self:center;width:min(300px,100%)}.gridChoiceBlock{min-width:0}.emotionPuzzlePlay{grid-template-columns:1fr}.puzzlePanelHeading small{display:none}.pieceTray{min-height:0}}@media (width<=480px){.emotionPuzzlePage{padding:8px}.emotionChoices{grid-template-columns:repeat(4,1fr)}.emotionChoices button{grid-template-columns:1fr;justify-items:center;padding:4px;font-size:.78rem}.emotionChoices img{width:46px;height:36px}.pieceTrayPanel,.targetBoardPanel{border-radius:18px;padding:9px}.puzzleActionBar{text-align:center;grid-template-columns:1fr;padding:11px}.puzzleActionBar button{width:100%}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}