:root{--card-width: 220px}*{margin:0;padding:0;box-sizing:border-box}html,body{height:auto;min-height:100%}body{min-height:100vh;overflow-x:hidden;display:block;transform:none !important;position:relative}.pickCard,.centerCard,#resultTextBtn{all:unset;cursor:pointer;display:block}.pickCard img,.centerCard img,#resultTextBtn img{display:block}.headerCol{z-index:99999999999}.logoAnime{position:absolute;z-index:1;margin-top:30px;left:50%;transform:translateX(-50%)}.logoAnime img{width:80%;margin-left:auto;margin-right:auto;display:flex}.resultText{position:absolute;z-index:1;left:50%;margin-top:340px;transform:translateX(-50%)}.resultText img{width:700px;max-width:100%;opacity:1;transition:opacity .3s ease}.resultText img.fade{opacity:0}.resultText img.fade{opacity:0}.copyrightText{position:relative;margin-top:-50px;padding:0 8px}.revealArea{position:relative;width:100%;display:flex;justify-content:center;align-items:center;gap:30px;background:url("../images/bg.jpg") center/cover no-repeat;padding:470px 0 150px 0}.sideCards{display:flex;flex-direction:column;gap:30px;cursor:pointer;animation:floatY 2.5s ease-in-out infinite;opacity:1;transition:opacity .5s ease}.sideCards img{width:var(--card-width);transform:scale(1);transform-origin:center;transition:transform .8s ease,opacity .4s ease}.sideCards .pickCard img{filter:drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25))}.cardFlip,.sideCards img{width:var(--card-width)}.centerArea{position:relative;width:var(--card-width);display:flex;flex-direction:column;align-items:center;flex-shrink:0}.floatWrap{animation:floatY 2.5s ease-in-out infinite;opacity:1}.tiltWrap{display:inline-block;position:relative;z-index:999999;transform-style:preserve-3d;transform-origin:center center;will-change:transform;transition:transform .08s cubic-bezier(0.22, 0.8, 0.32, 1)}.floatWrap.fadeOut{opacity:0}@keyframes centerFadeOut{to{opacity:0}}.cardFade{animation:centerFadeOut .4s forwards;pointer-events:none}.cardFade .floatWrap{animation:none !important}.flyingCard.fadeOut{opacity:0;transition:opacity .3s ease}.float{animation:floatY 2.5s ease-in-out infinite}.scaleWrap{transition:transform .6s ease,opacity .3s ease}.scaleWrap.grow{transform:scale(2)}.cardFlip,.cardFlip-content,.cardFlip-inside{backface-visibility:hidden}.cardFlip{width:var(--card-width);height:calc(var(--card-width)*593/342);top:-7px;position:relative;transform-style:preserve-3d;transform:translate3d(0, 0, 0);will-change:transform;transition:none;filter:drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45)) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.25))}.cardFlip-content{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s ease,opacity .3s ease;cursor:pointer}.cardFlip-content.is-flipped{transform:rotateY(180deg)}.cardFlip-inside{position:absolute;inset:0;overflow:hidden;transform-style:preserve-3d;transform:translateZ(0)}.cardFlip-inside img{width:100%;height:100%;object-fit:cover;image-rendering:auto}.cardFlip-inside--back{position:absolute;inset:0;isolation:isolate;display:block;transform:rotateY(180deg);transform-style:flat}.cardFlip-inside--back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cardFlip-inside--back img:first-of-type{z-index:1}.cardFlip-inside--back img[src*=mask]{z-index:3}.cardFlip-inside--back img[src*=base]{position:relative;z-index:1}.cardFlip-inside--back .holoLayer{position:absolute;inset:0;z-index:2}.sideCards .cardFlip-inside--back{position:absolute;inset:0;isolation:isolate}.sideCards .cardFlip-inside--back img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.sideCards .cardFlip-inside--back img[src*=base]{z-index:1}.sideCards .cardFlip-inside--back .holoLayer{z-index:2}.sideCards .cardFlip-inside--back img[src*=mask]{z-index:3;mix-blend-mode:normal}.holoLayer{position:absolute;inset:0;pointer-events:none;transform:translate3d(0, 0, 0);will-change:transform,background-position,opacity;background:radial-gradient(circle at center, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.35) 18%, transparent 60%),linear-gradient(45deg, transparent 0%, rgba(255, 0, 170, 0.55) 8%, rgba(255, 0, 170, 0.3) 10%, transparent 13%, rgba(255, 120, 0, 0.6) 16%, rgba(255, 120, 0, 0.15) 18%, transparent 22%, rgba(255, 255, 0, 0.65) 25%, rgba(255, 255, 0, 0.2) 27%, transparent 31%, rgba(0, 255, 140, 0.55) 35%, rgba(0, 255, 140, 0.15) 38%, transparent 42%, rgba(0, 255, 255, 0.65) 46%, rgba(0, 255, 255, 0.2) 49%, transparent 53%, rgba(0, 140, 255, 0.55) 57%, rgba(0, 140, 255, 0.15) 60%, transparent 66%, rgba(180, 0, 255, 0.6) 70%, rgba(180, 0, 255, 0.18) 73%, transparent 78%, rgba(255, 0, 200, 0.55) 82%, transparent 100%);background-size:180% 180%,320% 320%;background-position:center,calc(50% + (var(--mx, 50%) - 50%)*.4) calc(50% + (var(--my, 50%) - 50%)*.4);mix-blend-mode:screen;opacity:.75 !important;transition:opacity .25s ease;-webkit-mask-image:radial-gradient(circle at center, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%);mask-image:radial-gradient(circle at center, rgb(0, 0, 0) 55%, rgba(0, 0, 0, 0) 100%)}.cardFlip,.flyingCard,.noScrollTouch{touch-action:none}.nextBtn{all:unset;position:absolute;top:calc(100% + 196px);left:50%;transform:translateX(-50%) translateY(15px);display:flex;align-items:center;justify-content:center;gap:12px;padding:26px 65px;width:auto;height:auto;font-size:26px;line-height:1;white-space:nowrap;text-decoration:none;color:#fff;border-radius:999px;background:#000;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .5s ease,transform .25s ease,box-shadow .25s ease}.nextBtn::before{content:"";width:24px;height:24px;background:url("../images/x_logo.png") center/contain no-repeat;flex-shrink:0}.nextBtn:focus{outline:none}.nextBtn:link,.nextBtn:visited,.nextBtn:hover,.nextBtn:active,.nextBtn:focus{color:#fff;text-decoration:none}.nextBtn.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}.nextBtn.show:hover{transform:translateX(-50%) translateY(-7px)}.nextBtn.show:active{transform:translateX(-50%) translateY(-1px)}.retryBtn{position:absolute;right:-215px;bottom:-120px;background:rgba(0,0,0,0);border:none;cursor:pointer;width:85px;height:auto;z-index:0;opacity:0;transform:rotate(0deg) scale(0.9);pointer-events:none;transition:opacity .5s ease,transform .3s ease}.retryBtn.show{opacity:1;transform:rotate(0deg) scale(1);pointer-events:auto}.retryBtn.show:hover,.retryBtn.show:active{transform:rotate(180deg)}@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.flyInner{width:100%;height:100%;transform-origin:center}.flyingCard{position:absolute;z-index:9999;transition:left .6s ease,top .6s ease,transform .6s ease;will-change:left,top,transform}.sideCards.hidden img{opacity:0 !important;animation:none !important}.sideCards.is-hidden{opacity:0;pointer-events:none}.centerArea.hideOriginal{opacity:0;pointer-events:none;transition:opacity .4s ease}.hideOriginal{visibility:hidden}.sideCards img.flyToCenter{position:relative;z-index:999;transform:scale(1.45)}.flyingCard.floating{animation:flyingFloat 2.5s ease-in-out infinite}@keyframes flyingFloat{0%,100%{transform:translate(-50%, -50%) scale(2)}50%{transform:translate(-50%, calc(-50% - 12px)) scale(2)}}.touchHint{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%) scale(0.6);width:clamp(50px,12vw,90px);height:auto;z-index:99999;pointer-events:none;opacity:0;animation:touchPop 1.4s ease forwards}@keyframes touchPop{0%{opacity:0;transform:translate(-50%, -50%) scale(0.6)}20%{opacity:1;transform:translate(-50%, -50%) scale(1)}70%{opacity:1;transform:translate(-50%, -50%) scale(1)}100%{opacity:0;transform:translate(-50%, -50%) scale(0.85)}}@media(max-width: 768px){:root{--card-width: 23vw}.logoAnime{margin-top:6vw}.logoAnime img{width:95%}.resultText{margin-top:36vw;width:60vw}.copyrightText{margin-top:-4vw;padding:0 .5vw}.revealArea{gap:3vw;padding:33vw 0 1.5vw 0;height:150vw}.sideCards{gap:3vw}.cardFlip{margin-top:2px;transition:transform .05s linear;filter:drop-shadow(0 0 5px rgba(0, 0, 0, 0.7)) !important}.sideCards .pickCard{display:inline-block;filter:drop-shadow(0 4px 8px 0, 0, 0, 0.7) drop-shadow(0 8px 13px 0, 0, 0, 0.7)}.sideCards .pickCard img{display:block}.cardFlip-inside{transform-style:preserve-3d;overflow:hidden}.scaleWrap.grow{transform:scale(2)}.nextBtn{font-size:3vw;padding:4vw 6vw;top:59vw;gap:2vw}.nextBtn::before{width:3.5vw;height:3.5vw}.nextBtn.show:hover{transform:translateX(-50%) translateY(0)}.retryBtn{right:-26vw;bottom:-16vw;width:12vw}.touchHint{width:clamp(45px,14vw,40px);top:50%}.holoLayer{mix-blend-mode:screen}@keyframes floatYMobile{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}@keyframes flyingFloat{0%,100%{transform:translate(-50%, -50%) scale(2)}50%{transform:translate(-50%, calc(-50% - 3px)) scale(2)}}}