*{margin:0;padding:0;box-sizing:border-box}body,#root,.page{min-height:100vh}.page{background:linear-gradient(135deg,#e8bc67,#d4a157);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;touch-action:none;font-family:Arial,sans-serif}.heat-wave{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(255,107,53,.03) 2px,rgba(255,107,53,.03) 4px);animation:heatWave 2s linear infinite}@keyframes heatWave{0%{transform:translateY(0)}to{transform:translateY(4px)}}.header{position:absolute;top:20px;width:100%;text-align:center;z-index:10}.logo{width:120px;height:auto;filter:drop-shadow(0 4px 12px rgba(0,0,0,.3))}.counter{position:absolute;top:80px;right:20px;z-index:10;background:#00000080;color:#fff;padding:8px 16px;border-radius:20px;font-size:14px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.swipe-hint{position:absolute;top:50%;transform:translateY(-50%);font-size:30px;color:#ffffff4d;animation:pulse 2s ease-in-out infinite;z-index:1;pointer-events:none}.swipe-hint.left{left:20px}.swipe-hint.right{right:20px}@keyframes pulse{0%,to{opacity:.3;transform:translateY(-50%) scale(1)}50%{opacity:.6;transform:translateY(-50%) scale(1.1)}}.card-container{position:relative;width:320px;height:450px;z-index:100}.card{position:absolute;inset:0;margin:auto;width:100%;height:100%;border-radius:20px;border:3px solid rgba(255,255,255,.2);overflow:hidden;-webkit-user-select:none;user-select:none;display:flex;flex-direction:column;align-items:center;justify-content:center;transform-origin:center bottom;transition:transform .2s ease-out,opacity .2s ease-out;cursor:grab;box-shadow:0 10px 30px #0000004d,inset 0 1px #fff3}.card.dragging{transition:none!important;cursor:grabbing}.card.swiped-right{transform:translate(150%) rotate(30deg)!important;opacity:0!important}.card.swiped-left{transform:translate(-150%) rotate(-30deg)!important;opacity:0!important}.card:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.3) 0%,transparent 100%);border-radius:20px 20px 0 0;pointer-events:none}.grad-1{background:linear-gradient(135deg,#ff6b6b,#c92a2a)}.grad-2{background:linear-gradient(135deg,#4ecdc4,#0b7c7a)}.grad-3{background:linear-gradient(135deg,#95e77e,#51cf66)}.grad-4{background:linear-gradient(135deg,#a78bfa,#6d28d9)}.grad-5{background:linear-gradient(135deg,#fbbf24,#f59e0b)}.doppet-placeholder{width:150px;height:150px;border-radius:50%;background:#fff3;border:3px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;font-size:60px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.card-name{margin-top:20px;font-size:28px;font-weight:700;color:#fff;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.card-type{margin-top:5px;font-size:16px;color:#ffffffe6;text-transform:uppercase;letter-spacing:2px}.nav-indicators{position:absolute;bottom:30px;display:flex;gap:10px;z-index:10}.indicator{width:8px;height:8px;border-radius:50%;background:#ffffff4d;transition:all .3s ease}.indicator.active{width:24px;border-radius:4px;background:#fffc}.action-label{position:absolute;top:50%;font-size:32px;font-weight:700;text-transform:uppercase;padding:10px 20px;border-radius:10px;opacity:0;pointer-events:none;z-index:1000;transition:opacity .2s ease}.action-label.like{right:40px;color:#51cf66;border:3px solid #51CF66;transform:translateY(-50%) rotate(20deg)}.action-label.nope{left:40px;color:#ff6b6b;border:3px solid #FF6B6B;transform:translateY(-50%) rotate(-20deg)}.action-label.visible{opacity:1}.restart-btn{bottom:100px;padding:16px 40px;z-index:10;display:block;background:linear-gradient(135deg,#ff6b35,#f7931e);color:#fff;border:none;border-radius:50px;font-size:18px;font-weight:700;cursor:pointer;text-transform:uppercase;letter-spacing:1px;box-shadow:0 10px 30px #ff6b3566,0 5px 15px #0003,inset 0 1px #ffffff4d;opacity:0;transform:translateY(20px) scale(.9);transition:all .4s cubic-bezier(.68,-.55,.265,1.55);visibility:hidden;position:absolute;overflow:hidden}.restart-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transition:left .5s ease}.restart-btn:after{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(to bottom,rgba(255,255,255,.3) 0%,transparent 100%);border-radius:50px 50px 0 0;pointer-events:none}.restart-btn:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 15px 40px #ff6b3580,0 10px 25px #0000004d,inset 0 1px #fff6}.restart-btn:hover:before{left:100%}.restart-btn:active{transform:translateY(0) scale(1.02);box-shadow:0 5px 20px #ff6b3566,0 3px 10px #0003,inset 0 1px #ffffff4d}.restart-btn.visible{visibility:visible;opacity:1;transform:translateY(0) scale(1);animation:buttonPulse 2s ease-in-out infinite}@keyframes buttonPulse{0%,to{box-shadow:0 10px 30px #ff6b3566,0 5px 15px #0003,inset 0 1px #ffffff4d}50%{box-shadow:0 10px 40px #ff6b3599,0 5px 20px #0000004d,inset 0 1px #ffffff4d,0 0 40px #ff6b354d}}.button-fire-particle{position:absolute;width:4px;height:4px;border-radius:50%;background:radial-gradient(circle,gold,#ff6b35);pointer-events:none;opacity:0;z-index:11}@keyframes buttonFireRise{0%{opacity:0;transform:translate(0) scale(1)}20%{opacity:1}to{opacity:0;transform:translate(var(--tx),-60px) scale(.3)}}.confetti{position:fixed;width:10px;height:10px;background:var(--confetti-color);animation:confettiFall 1.5s ease-out forwards;z-index:1000}@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0) scale(1)}to{opacity:0;transform:translateY(300px) rotate(720deg) scale(.5)}}.fire-particle{position:fixed;width:3px;height:3px;border-radius:50%;pointer-events:none;opacity:0;z-index:1;background:radial-gradient(circle,gold,#ff6b35);animation:rise 4s linear infinite;box-shadow:0 0 6px #ff6b35}@keyframes rise{0%{opacity:0;transform:translateY(0) scale(1)}10%{opacity:.8}90%{opacity:.8}to{opacity:0;transform:translateY(-100vh) scale(0)}}@keyframes buttonShake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-3px)}20%,40%,60%,80%{transform:translate(3px)}}@keyframes cardBounce{0%,to{transform:scale(1) translateY(0)}30%{transform:scale(1.1) translateY(-20px)}60%{transform:scale(.95) translateY(5px)}}@media (hover:none) and (pointer:coarse){.page{cursor:auto}}.card{perspective:1200px}.card-flip{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.6,.2,1)}.card.is-flipped .card-flip{transform:rotateY(180deg)}.card-face{position:absolute;inset:0;backface-visibility:hidden;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:18px}.card-back{transform:rotateY(180deg);background:#00000059;color:#fff}.card-back-scroll{width:100%;height:100%;overflow:auto;display:flex;flex-direction:column;align-items:stretch;gap:10px}.doppet-img{width:70%;max-width:220px;aspect-ratio:1/1;object-fit:cover;border-radius:16px;align-self:center;border:3px solid rgba(255,255,255,.5);box-shadow:0 10px 20px #00000059}.back-title{text-align:center;font-size:22px;letter-spacing:.5px;margin-top:8px;text-shadow:0 2px 6px rgba(0,0,0,.35)}.kv{display:grid;grid-template-columns:120px 1fr;gap:8px;align-items:center;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:10px;padding:8px 10px}.kv .k{font-weight:700;opacity:.9}.kv .v{text-align:right;opacity:.95}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;word-break:break-all}.hint{text-align:center;font-size:12px;opacity:.8;margin-top:6px}