:root{--bg-0: #06040b;--gold: #e3bd7d;--gold-dim: #a8843f;--violet: #8b6fd4;--text: #ece6f7;--muted: #8a80a4;--danger: #e2705f;--card-w: clamp(112px, 20vw, 176px)}*{box-sizing:border-box}html,body{margin:0;padding:0;min-height:100%}body{font-family:system-ui,-apple-system,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:var(--text);background-color:var(--bg-0);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-2;pointer-events:none;background:radial-gradient(1100px 620px at 50% -12%,rgba(124,92,191,.28),transparent 68%),radial-gradient(900px 520px at 88% 108%,rgba(200,146,62,.13),transparent 70%),radial-gradient(700px 420px at 6% 92%,rgba(90,60,160,.16),transparent 72%),#06040b}body:after{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:-1;pointer-events:none;opacity:.55;background-image:radial-gradient(1.2px 1.2px at 12% 18%,rgba(255,255,255,.6),transparent 100%),radial-gradient(1px 1px at 28% 42%,rgba(255,255,255,.4),transparent 100%),radial-gradient(1.4px 1.4px at 44% 12%,rgba(255,255,255,.5),transparent 100%),radial-gradient(1px 1px at 62% 34%,rgba(255,255,255,.35),transparent 100%),radial-gradient(1.3px 1.3px at 78% 20%,rgba(255,255,255,.55),transparent 100%),radial-gradient(1px 1px at 90% 46%,rgba(255,255,255,.4),transparent 100%),radial-gradient(1.1px 1.1px at 18% 72%,rgba(255,255,255,.45),transparent 100%),radial-gradient(1px 1px at 36% 88%,rgba(255,255,255,.3),transparent 100%),radial-gradient(1.3px 1.3px at 70% 76%,rgba(255,255,255,.45),transparent 100%),radial-gradient(1px 1px at 86% 90%,rgba(255,255,255,.35),transparent 100%);background-repeat:no-repeat}.stage{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;align-items:center;padding:clamp(24px,4vh,44px) clamp(16px,4vw,40px) clamp(20px,3vh,32px)}.main{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(12px,3vh,32px) 0}.head{text-align:center;margin-bottom:clamp(22px,4.5vh,42px)}.head h1{margin:0;font-size:clamp(22px,4.6vw,33px);font-weight:500;letter-spacing:.32em;text-indent:.32em;color:#f7f1ff;text-shadow:0 0 28px rgba(227,189,125,.38),0 0 64px rgba(139,111,212,.32)}.head .rule{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 12px}.head .rule span{height:1px;width:clamp(40px,12vw,76px);background:linear-gradient(90deg,transparent,rgba(227,189,125,.55),transparent)}.head .rule i{width:5px;height:5px;transform:rotate(45deg);background:#e3bd7dbf;box-shadow:0 0 10px #e3bd7db3}.head p{margin:0;font-size:12px;letter-spacing:.22em;color:var(--muted)}.panel{width:100%;max-width:720px;padding:clamp(20px,4vw,34px);border-radius:20px;border:1px solid rgba(227,189,125,.16);background:#140e228c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 70px -40px #000000f2,inset 0 1px #ffffff0a;animation:panelIn .42s cubic-bezier(.2,.8,.3,1) both}@keyframes panelIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}.panel-label{margin:0 0 20px;text-align:center;font-size:13px;letter-spacing:.16em;color:var(--muted)}.count-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:24px}.count-btn{aspect-ratio:1 / 1;display:grid;place-items:center;border-radius:12px;border:1px solid rgba(227,189,125,.2);background:#ffffff05;color:var(--text);font-size:17px;font-family:inherit;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .18s,background .18s,box-shadow .18s,color .18s}.count-btn:hover{border-color:#e3bd7d80;background:#e3bd7d0f}.count-btn.active{border-color:var(--gold);background:#e3bd7d26;color:#fff4dc;box-shadow:0 0 0 1px #e3bd7d59,0 0 26px -6px #e3bd7d8c}.btn{display:block;width:100%;padding:15px 12px;border-radius:12px;font-family:inherit;font-size:15px;letter-spacing:.3em;text-indent:.3em;cursor:pointer;transition:background .2s,box-shadow .2s,border-color .2s,opacity .2s}.btn-primary{border:1px solid rgba(227,189,125,.55);background:linear-gradient(180deg,#e3bd7d38,#e3bd7d12);color:#ffeec8}.btn-primary:hover:not(:disabled){border-color:#e3bd7dd9;background:linear-gradient(180deg,#e3bd7d4d,#e3bd7d1a);box-shadow:0 0 34px -8px #e3bd7d99}.btn-primary:disabled{opacity:.32;cursor:not-allowed}.btn-ghost{border:1px solid rgba(227,189,125,.28);background:transparent;color:#f0e8ffd1}.btn-ghost:hover{border-color:#e3bd7d99;background:#e3bd7d12;box-shadow:0 0 28px -12px #e3bd7db3}.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:12px;margin-bottom:24px}.slot{display:flex;flex-direction:column;align-items:center;gap:6px}.slot-idx{font-size:11px;letter-spacing:.14em;color:var(--muted)}.slot input{width:100%;padding:12px 8px;text-align:center;font-family:inherit;font-size:20px;font-variant-numeric:tabular-nums;color:var(--text);border-radius:10px;border:1px solid rgba(227,189,125,.22);background:#ffffff08;outline:none;transition:border-color .16s,box-shadow .16s;-moz-appearance:textfield}.slot input::-webkit-outer-spin-button,.slot input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.slot input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #e3bd7d24}.slot.has-err input{border-color:#e2705fbf;box-shadow:0 0 0 3px #e2705f1f}.slot-err{height:14px;font-size:11px;line-height:14px;color:var(--danger);white-space:nowrap}.hint{margin:14px 0 0;text-align:center;font-size:11px;letter-spacing:.1em;color:#8a80a4bf}.result-wrap{width:100%;max-width:1080px;display:flex;flex-direction:column;align-items:center;animation:panelIn .42s cubic-bezier(.2,.8,.3,1) both}.cards{--gap: clamp(12px, 2.4vw, 30px);--cols: 3;--max-w: 200px;display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:var(--gap);width:100%;margin-bottom:clamp(24px,4.5vh,42px)}.card{width:min(var(--max-w),calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols)));display:flex;flex-direction:column;gap:10px;animation:cardIn .52s cubic-bezier(.2,.8,.3,1) both}.cards.n-1{--cols: 1;--max-w: 304px}.cards.n-2{--cols: 2;--max-w: 234px}.cards.n-3{--cols: 3;--max-w: 202px}.cards.n-4{--cols: 4;--max-w: 168px}.cards.n-5{--cols: 5;--max-w: 168px}.cards.n-6{--cols: 6;--max-w: 160px}.cards.n-7,.cards.n-8,.cards.n-9{--cols: 5;--max-w: 146px}.cards.n-10,.cards.n-11,.cards.n-12{--cols: 6;--max-w: 124px}@keyframes cardIn{0%{opacity:0;transform:translateY(20px) scale(.93)}to{opacity:1;transform:none}}.is-resetting .card{animation:cardOut .46s cubic-bezier(.4,0,1,1) forwards}@keyframes cardOut{to{opacity:0;transform:translateY(-26px) rotate(5deg) scale(.9)}}.card-inner{position:relative;width:100%;aspect-ratio:350 / 600;transform-style:preserve-3d;transform:rotateY(0);transition:transform .85s cubic-bezier(.35,.1,.2,1)}.card.flipped .card-inner{transform:rotateY(180deg)}.face{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:8px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}.face.back{display:grid;place-items:center;border:1px solid rgba(227,189,125,.32);background:repeating-linear-gradient(45deg,rgba(227,189,125,.07) 0 1px,transparent 1px 9px),repeating-linear-gradient(-45deg,rgba(227,189,125,.07) 0 1px,transparent 1px 9px),radial-gradient(circle at 50% 45%,#2b1f4a,#150e28 72%);box-shadow:0 0 26px -8px #8b6fd4a6,inset 0 0 42px #0000008c}.face.back:after{content:"";width:44%;aspect-ratio:1 / 1;border:1px solid rgba(227,189,125,.42);transform:rotate(45deg);box-shadow:0 0 18px #e3bd7d33,inset 0 0 18px #e3bd7d24}.face.front{transform:rotateY(180deg);background:#0b0714;border:1px solid rgba(227,189,125,.28);box-shadow:0 20px 48px -20px #000000f2,0 0 32px -14px #e3bd7d80}.face.front img{display:block;width:100%;height:100%;object-fit:cover}.card.reversed .face.front img{transform:rotate(180deg)}.card-meta{text-align:center;animation:metaIn .4s ease both}@keyframes metaIn{0%{opacity:0}to{opacity:1}}.card-name{font-size:clamp(12px,2.6vw,14px);letter-spacing:.06em;color:#f1e9ff}.card-name em{font-style:normal;margin-left:5px;padding:1px 4px;font-size:10px;letter-spacing:.05em;color:var(--gold);border:1px solid rgba(227,189,125,.4);border-radius:3px;vertical-align:1px}.card-en{margin-top:3px;font-size:clamp(9px,2vw,11px);letter-spacing:.05em;color:var(--muted)}.card-pick{margin-top:4px;font-size:10px;letter-spacing:.12em;color:#a89ec4d9}.result-actions{width:100%;max-width:360px}.foot{width:100%;padding-top:14px;text-align:center;font-size:10px;letter-spacing:.16em;color:#8a80a480}@media (max-width: 560px){.count-grid{grid-template-columns:repeat(4,1fr)}.slots{grid-template-columns:repeat(3,1fr);gap:10px}.cards.n-4,.cards.n-5,.cards.n-6,.cards.n-7,.cards.n-8,.cards.n-9{--cols: 3}.cards.n-10,.cards.n-11,.cards.n-12{--cols: 4}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}