.emotionMatchPage{color:#3c3150;background:radial-gradient(circle at 12% 8%,#ffdf9794,#0000 28%),radial-gradient(circle at 92% 12%,#c7e7efb8,#0000 30%),linear-gradient(155deg,#fffaf0,#f5effc 58%,#eaf7f3);min-height:100dvh;padding:18px}.emotionMatchHeader{text-align:center;grid-template-columns:150px 1fr 150px;align-items:center;gap:18px;width:min(1180px,100%);margin:0 auto 14px;display:grid}.emotionMatchHeader:after{content:""}.emotionMatchHeader h1{color:#604295;margin:1px 0 3px;font-size:clamp(2rem,4vw,3rem);line-height:1.05}.emotionMatchHeader p{color:#685d76;margin:0;font-weight:750}.emotionMatchHeader .emotionMatchEyebrow{color:#b2634d;letter-spacing:.16em;font-size:.82rem;font-weight:1000}.emotionMatchBack{color:#654c82;background:#ffffffe6;border:2px solid #ded2ed;border-radius:15px;place-items:center;min-height:46px;font-weight:950;text-decoration:none;display:grid;box-shadow:0 5px #6349821f}.emotionMatchGuide{color:#64586e;flex-wrap:wrap;justify-content:center;gap:10px 20px;width:min(1080px,100%);margin:0 auto 14px;font-size:.94rem;font-weight:850;display:flex}.emotionMatchGuide span{align-items:center;gap:7px;display:flex}.emotionMatchGuide b{color:#fff;background:#8061b5;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.78rem;display:grid}.emotionMatchGame{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);background:#ffffffc7;border:3px solid #fffffff2;border-radius:26px;width:min(1080px,100%);margin:0 auto;padding:16px;box-shadow:0 18px 45px #4a345c24}.emotionMatchColumnLabels{color:#675878;text-align:center;grid-template-columns:minmax(0,1fr) minmax(180px,.78fr);gap:clamp(80px,16vw,220px);margin:0 10px 10px;font-size:1rem;display:grid}.emotionMatchBoard{isolation:isolate;grid-template-columns:minmax(0,1fr) minmax(180px,.78fr);gap:clamp(80px,16vw,220px);display:grid;position:relative}.emotionMatchDescriptions,.emotionMatchImages{grid-template-rows:repeat(5,126px);align-content:start;gap:12px;display:grid}.emotionMatchLines{z-index:1;pointer-events:none;width:100%;height:100%;position:absolute;inset:0;overflow:visible}.emotionMatchLines path{filter:drop-shadow(0 2px #fffffff2);transition:stroke .2s}.emotionDescriptionCard,.emotionImageCard{z-index:2;background:#fff;border:3px solid #0000;min-width:0;height:126px;transition:transform .15s,border-color .15s,box-shadow .15s;position:relative}.emotionDescriptionCard{color:#463b51;cursor:grab;touch-action:none;font:inherit;text-align:left;-webkit-user-select:none;user-select:none;border-color:#e9e0f1;border-radius:18px;grid-template-columns:38px 1fr 18px;align-items:center;padding:10px 4px 10px 10px;font-size:clamp(.86rem,1.55vw,1.08rem);font-weight:900;line-height:1.45;display:grid;box-shadow:0 7px 16px #46365617}.emotionDescriptionSpeaker{background:#f1e9fb;border-radius:50%;place-items:center;width:31px;height:31px;font-size:1rem;display:grid}.emotionDescriptionCard i,.emotionImageCard i{background:#baa9ca;border:4px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;top:50%;transform:translateY(-50%);box-shadow:0 0 0 2px #8d79a2}.emotionDescriptionCard i{right:-12px}.emotionImageCard i{left:-12px}.emotionDescriptionCard.isDragging{cursor:grabbing;border-color:#f0a23b;transform:translate(4px)scale(1.01);box-shadow:0 0 0 4px #f0a23b33,0 8px 18px #402c5624}.emotionDescriptionCard.isDragging i{background:#ffbe3d;box-shadow:0 0 0 3px #d48a18}.emotionDescriptionCard.isConnected i,.emotionImageCard.isConnected i{background:#7254b8}.emotionDescriptionCard.isWrong{background:#fff4f6;border-color:#df5b71}.emotionDescriptionCard.isWrong i{background:#d84963;box-shadow:0 0 0 2px #a62e46}.emotionImageCard{border-color:#fff;border-radius:18px;padding:0;overflow:visible;box-shadow:0 7px 18px #372c4224}.emotionImageCard img{object-fit:cover;object-position:center 37%;border-radius:14px;width:100%;height:100%;display:block}.emotionImageCard strong{color:#fff;letter-spacing:.06em;text-align:center;text-shadow:0 1px 2px #00000059;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#362a43d1;border:2px solid #ffffffe6;border-radius:999px;min-width:72px;padding:5px 13px;font-size:1rem;font-weight:1000;position:absolute;bottom:8px;right:9px}.emotionImageCard.isConnected{border-color:#a78bd0}.emotionImageCard.isOver{z-index:4;border-color:#f0a23b;transform:scale(1.025);box-shadow:0 0 0 5px #f0a23b3d,0 10px 22px #372c422e}.emotionDescriptionCard:hover,.emotionDescriptionCard:focus-visible{outline-offset:2px;outline:4px solid #639bb740;transform:translateY(-2px)}.emotionMatchDragPath{animation:.45s linear infinite emotionMatchDash}.emotionMatchActions{background:#f8f4fb;border-radius:18px;grid-template-columns:1fr auto auto;align-items:center;gap:14px;margin-top:15px;padding:12px 12px 12px 18px;display:grid}.emotionMatchActions p{color:#61566d;margin:0;font-weight:900}.emotionMatchProgress{color:#68489b;text-align:center;background:#fff;border-radius:999px;min-width:62px;padding:9px 12px;font-size:1.08rem;font-weight:1000}.emotionMatchActions button,.emotionMatchSuccessInner>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.04rem;font-weight:1000;box-shadow:0 6px #3f2872}.emotionMatchActions button:disabled{cursor:not-allowed;background:#c8c1d0;box-shadow:0 5px #9b93a3}.emotionMatchSuccess{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%;transform:translate(-50%,-50%)}.emotionMatchSuccess::backdrop{-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background:#30233e9e}.emotionMatchSuccessInner{text-align:center;background:#fffdf7;border:5px solid #ffd75b;border-radius:28px;justify-items:center;padding:30px;display:grid;box-shadow:0 24px 90px #2b1c3961}.emotionMatchSuccessInner h2{color:#6842aa;margin:7px 0 3px;font-size:2.25rem}.emotionMatchSuccessInner p{color:#675b6e;margin:6px 0 18px;font-weight:850;line-height:1.6}.emotionMatchSuccessInner>button{width:min(280px,100%)}.emotionMatchSuccessInner>a{color:#655078;margin-top:16px;font-weight:900}.emotionMatchStars{color:#ffc826;letter-spacing:.16em;text-shadow:0 3px #e59a20;font-size:2.15rem;animation:.75s cubic-bezier(.2,1.6,.35,1) both emotionMatchPop}@keyframes emotionMatchPop{0%{opacity:0;transform:scale(.35)rotate(-8deg)}70%{transform:scale(1.2)rotate(4deg)}to{opacity:1;transform:scale(1)}}@keyframes emotionMatchDash{to{stroke-dashoffset:-18px}}@media (width<=700px){.emotionMatchPage{padding:9px}.emotionMatchHeader{grid-template-columns:1fr;gap:9px}.emotionMatchHeader>div{grid-area:1/1}.emotionMatchHeader:after{display:none}.emotionMatchBack{grid-area:2/1}.emotionMatchGuide{justify-content:flex-start;align-items:flex-start;gap:7px;padding:0 5px}.emotionMatchGuide span{flex:200px}.emotionMatchGame{border-radius:20px;padding:10px}.emotionMatchColumnLabels,.emotionMatchBoard{grid-template-columns:minmax(0,1.15fr) minmax(112px,.85fr);gap:42px}.emotionMatchDescriptions,.emotionMatchImages{grid-template-rows:repeat(5,108px);gap:9px}.emotionDescriptionCard{border-radius:14px;grid-template-columns:29px 1fr 14px;height:108px;padding:7px 1px 7px 7px;font-size:clamp(.71rem,3.1vw,.9rem);line-height:1.35}.emotionDescriptionSpeaker{width:25px;height:25px;font-size:.78rem}.emotionImageCard{border-radius:14px;height:108px}.emotionImageCard img{border-radius:10px}.emotionImageCard strong{min-width:58px;padding:3px 8px;font-size:.82rem;bottom:5px;right:5px}.emotionDescriptionCard i,.emotionImageCard i{border-width:3px;width:14px;height:14px}.emotionDescriptionCard i{right:-10px}.emotionImageCard i{left:-10px}.emotionMatchActions{grid-template-columns:1fr auto;padding:10px}.emotionMatchActions p{text-align:center;grid-column:1/-1;font-size:.9rem}}@media (width<=390px){.emotionMatchColumnLabels,.emotionMatchBoard{grid-template-columns:minmax(0,1.15fr) minmax(100px,.85fr);gap:32px}.emotionMatchDescriptions,.emotionMatchImages{grid-template-rows:repeat(5,100px)}.emotionDescriptionCard,.emotionImageCard{height:100px}.emotionMatchActions button{padding-inline:16px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}