*{box-sizing:border-box;margin:0;padding:0;font-family:等线;color:#373d46}#app{min-height:100vh;width:100vw;padding:10px;background-image:linear-gradient(to right top,#bbddfc,#d3f5fb,#d3f1fb,#d4edfb,#d6e9fa,#d1e6fa,#cde2fa,#c9dffa,#bbddfc,#aadbfe,#96d9fe,#80d8fd)}h3{display:inline-block;position:relative;margin:16px 0}h3:after{content:"";display:block;position:absolute;background-color:#3f87ff80;width:100%;height:10px;bottom:-3px;left:0}.grid{display:grid;grid-template-columns:repeat(9,1fr);align-items:center;gap:5px;margin:10px 0}.card{flex:1;display:flex;align-items:center;justify-content:center;font-size:20px;background-color:#fff;border-radius:2px;height:50px;cursor:pointer;box-shadow:3px 3px #405579;transition:all .3s ease-in;color:#405579;position:relative;overflow:hidden}.card img{width:100%;height:100%}.active-card:active{opacity:.7;transform:translateY(5px)}.btn{text-align:center;border-radius:4px;position:relative;transition:all .3s ease-in;box-shadow:0 3px #405579;-webkit-user-select:none;user-select:none;cursor:pointer;vertical-align:middle;color:#405579;font-weight:600;padding:10px 0;border:1px solid #405579}.btn:active{transform:translateY(5px)}.current{transform:translateY(-5px)}.current:before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-top:10px solid #f3bcca;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.result{display:flex;align-items:center;margin:10px 0;background-color:#f5f5f5;box-shadow:3px 3px #637da1;border-radius:5px;padding:10px 0}.result .card{width:30px!important;height:40px;flex:unset!important}.result-left{width:60px;display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;min-width:0}.result-left p{margin-bottom:5px;font-size:12px}.result-left .card{width:24px!important;height:30px}.result-right{flex:1;flex-shrink:0;min-width:0;display:flex;gap:5px;flex-wrap:wrap;background-color:#f7d2db;border-radius:5px;padding:10px;margin-right:10px}.list-move,.list-enter-active,.list-leave-active{transition:all .5s ease}.list-enter-from,.list-leave-to{opacity:0;transform:translate(30px)}.list-leave-active{position:absolute}