.game h1{font-size:clamp(28px,3.8vw,42px)}.scattered{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:38px 26px;padding:30px 18px 48px;align-items:center}.play-card{background:#fff;border:1px solid #cfdcd4;border-radius:19px;box-shadow:0 12px 25px #25473912;overflow:hidden;transition:transform .2s,box-shadow .2s;animation:card-arrive .3s ease both}.scattered>.play-card{transform:rotate(var(--tilt));margin-top:12px}.scattered>.play-card:nth-child(even){margin-top:35px}.play-text{display:block;width:100%;padding:27px 18px;min-height:242px;border:0;background:white;text-align:center;border-radius:18px}.play-text:hover{transform:none;background:#f8faf6}.play-card:hover{box-shadow:0 16px 29px #25473920}.picked-center{margin:30px auto;padding:25px;background:#e8eee8;border:1px solid #d3dfd4;border-radius:24px;max-width:770px}.picked-center h2{text-align:center;font-weight:500;margin-top:0}.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.pair .play-card{animation:pick-up .35s ease}.pair.ordered{max-width:560px;margin:auto;grid-template-columns:1fr}.pair.ordered .play-text{min-height:0}.place-label{text-align:center;color:#426457;font-size:15px;font-weight:600;margin:12px}.rank-slots{display:grid;gap:18px;max-width:610px;margin:20px auto}.rank-slot{padding:14px 20px 20px;border:2px dashed #b4c8b9;border-radius:20px;background:#edf2ed;transition:background .15s,border-color .15s}.rank-slot .play-text{min-height:0}.drop-target{display:block;width:100%;min-height:85px;background:transparent;border:0;color:#486657}.rank-slot:has(.play-card) .drop-target{min-height:48px;margin-top:8px}.drop-target:disabled{opacity:.8}.drop-hover{border-color:#285b52;background:#d2e9d8;outline:3px solid #285b5230}.drag-handle{width:100%;border:0;border-top:1px solid #e2e9e1;border-radius:0;background:#f1f5ef;cursor:grab;touch-action:none;user-select:none}.drag-handle span{font-size:14px;margin-left:8px}.held{outline:3px solid #285b52;outline-offset:3px}.held .drag-handle:after{content:' ✓'}.drag-source{opacity:.35}.drag-ghost{position:fixed;z-index:9999;pointer-events:none;transform:translate(-50%,-30%) rotate(3deg);opacity:.92;max-height:330px;box-shadow:0 20px 50px #163c3745;animation:none}.game .actions{position:relative}.completion{margin:0 auto 25px;border-radius:18px;background:#285b52;color:white;padding:25px;text-align:center;font-size:25px;animation:completion-pop .65s cubic-bezier(.2,.8,.2,1)}.completion span{display:inline-block;margin-right:10px;border:1px solid #ffffff70;border-radius:50%;width:40px;line-height:38px}.generated-result{background:white;border:1px solid #ccdacf;border-radius:25px;padding:26px;box-shadow:0 16px 40px #284e4912;animation:result-reveal .65s ease both}.generated-result .ranking li{background:#f8faf7}.completion small{display:block;font-size:14px;margin-top:8px;font-weight:400}.result-edit{margin:18px 0}@keyframes card-arrive{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}@keyframes pick-up{from{opacity:.4;transform:scale(.92) translateY(15px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes completion-pop{0%{opacity:0;transform:scale(.88)}65%{transform:scale(1.025)}100%{opacity:1;transform:scale(1)}}@keyframes result-reveal{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}@media(max-width:700px){.scattered{grid-template-columns:1fr;padding:20px 12px 32px;gap:27px}.scattered>.play-card{width:calc(100% - 10px);max-width:380px;margin-inline:auto}.scattered>.play-card:nth-child(even){margin-top:5px}.pair{grid-template-columns:1fr}.picked-center{padding:20px 16px}.play-text{font-size:17px;min-height:225px;padding:26px 16px}.pair.ordered .play-text{min-height:0}.rank-slot{padding:12px 14px}.generated-result{padding:18px}.completion{font-size:23px}}@media(prefers-reduced-motion:reduce){.play-card,.completion,.generated-result{animation:none;transition:none}}
