.card-container{width:300px;height:450px;background-color:transparent;perspective:1000px;margin:0 auto;cursor:pointer;animation:float 6s ease-in-out infinite}.card-inner{position:relative;width:100%;height:100%;text-align:center;transition:transform .15s ease-out;transform-style:preserve-3d}.card-container.flipped .card-inner{transition:transform .8s cubic-bezier(.68,-.55,.27,1.55)}.tilt-canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:300;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);pointer-events:none}.tilt-zone{pointer-events:auto;transition:none}.card-container:has(.tilt-zone.tilt-1:hover) .card-inner{transform:rotateX(20deg) rotateY(-10deg)}.card-container:has(.tilt-zone.tilt-2:hover) .card-inner{transform:rotateX(20deg) rotateY(-5deg)}.card-container:has(.tilt-zone.tilt-3:hover) .card-inner{transform:rotateX(20deg) rotateY(0)}.card-container:has(.tilt-zone.tilt-4:hover) .card-inner{transform:rotateX(20deg) rotateY(5deg)}.card-container:has(.tilt-zone.tilt-5:hover) .card-inner{transform:rotateX(20deg) rotateY(10deg)}.card-container:has(.tilt-zone.tilt-16:hover) .card-inner{transform:rotateX(-10deg) rotateY(-10deg)!important}.card-container:has(.tilt-zone.tilt-17:hover) .card-inner{transform:rotateX(-10deg) rotateY(-5deg)!important}.card-container:has(.tilt-zone.tilt-18:hover) .card-inner{transform:rotateX(-10deg) rotateY(0)!important}.card-container:has(.tilt-zone.tilt-19:hover) .card-inner{transform:rotateX(-10deg) rotateY(5deg)!important}.card-container:has(.tilt-zone.tilt-20:hover) .card-inner{transform:rotateX(-10deg) rotateY(10deg)!important}.card-container:has(.tilt-zone.tilt-21:hover) .card-inner{transform:rotateX(-20deg) rotateY(-10deg)!important}.card-container:has(.tilt-zone.tilt-22:hover) .card-inner{transform:rotateX(-20deg) rotateY(-5deg)!important}.card-container:has(.tilt-zone.tilt-23:hover) .card-inner{transform:rotateX(-20deg) rotateY(0)!important}.card-container:has(.tilt-zone.tilt-24:hover) .card-inner{transform:rotateX(-20deg) rotateY(5deg)!important}.card-container:has(.tilt-zone.tilt-25:hover) .card-inner{transform:rotateX(-20deg) rotateY(10deg)!important}.card-container:has(.tilt-zone.tilt-9:hover) .card-inner{transform:rotateX(10deg) rotateY(5deg)}.card-container:has(.tilt-zone.tilt-10:hover) .card-inner{transform:rotateX(10deg) rotateY(10deg)}.card-container:has(.tilt-zone.tilt-11:hover) .card-inner{transform:rotateX(0) rotateY(-10deg)}.card-container:has(.tilt-zone.tilt-12:hover) .card-inner{transform:rotateX(0) rotateY(-5deg)}.card-container:has(.tilt-zone.tilt-13:hover) .card-inner{transform:rotateX(0) rotateY(0)}.card-container:has(.tilt-zone.tilt-14:hover) .card-inner{transform:rotateX(0) rotateY(5deg)}.card-container:has(.tilt-zone.tilt-15:hover) .card-inner{transform:rotateX(0) rotateY(10deg)}.card-container:has(.tilt-zone.tilt-16:hover) .card-inner{transform:rotateX(-10deg) rotateY(-10deg)}.card-container:has(.tilt-zone.tilt-17:hover) .card-inner{transform:rotateX(-10deg) rotateY(-5deg)}.card-container:has(.tilt-zone.tilt-18:hover) .card-inner{transform:rotateX(-10deg) rotateY(0)}.card-container:has(.tilt-zone.tilt-19:hover) .card-inner{transform:rotateX(-10deg) rotateY(5deg)}.card-container:has(.tilt-zone.tilt-20:hover) .card-inner{transform:rotateX(-10deg) rotateY(10deg)}.card-container:has(.tilt-zone.tilt-21:hover) .card-inner{transform:rotateX(-20deg) rotateY(-10deg)}.card-container:has(.tilt-zone.tilt-22:hover) .card-inner{transform:rotateX(-20deg) rotateY(-5deg)}.card-container:has(.tilt-zone.tilt-23:hover) .card-inner{transform:rotateX(-20deg) rotateY(0)}.card-container:has(.tilt-zone.tilt-24:hover) .card-inner{transform:rotateX(-20deg) rotateY(5deg)}.card-container:has(.tilt-zone.tilt-25:hover) .card-inner{transform:rotateX(-20deg) rotateY(10deg)}.card-container:not(.flipped) .card-inner{transform:rotateX(0) rotateY(0)}.card-container.flip-standard.flipped .card-inner,.card-container.flip-standard .card-back{transform:rotateY(180deg)}.card-container.flip-vertical.flipped .card-inner,.card-container.flip-vertical .card-back{transform:rotateX(180deg)}.card-container.flip-diagonal.flipped .card-inner,.card-container.flip-diagonal .card-back{transform:rotate3d(1,1,0,180deg)}.card-container.flip-invert.flipped .card-inner,.card-container.flip-invert .card-back{transform:rotate3d(-1,1,0,180deg)}.card-container.flipped .tilt-zone{pointer-events:none}.card-front,.card-back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:15px;overflow:hidden;box-shadow:0 8px 30px #000000b3,0 0 20px #00d4ff33}.card-back{display:flex;align-items:center;justify-content:center}.layer-bg{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}.layer-art{position:absolute;top:50px;left:10%;width:80%;height:70%;object-fit:contain;z-index:3;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5))}.holo-overlay{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3;opacity:.08;pointer-events:none;mix-blend-mode:color-dodge;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.3) 0%,rgba(0,255,255,.4) 15%,rgba(255,0,255,.4) 30%,transparent 60%),linear-gradient(115deg,transparent 10%,rgba(255,255,255,.5) 20%,rgba(0,255,255,.6) 30%,rgba(255,0,255,.6) 40%,rgba(255,255,0,.5) 50%,rgba(255,100,255,.6) 60%,rgba(100,255,255,.6) 70%,rgba(255,255,255,.5) 80%,transparent 90%);background-size:200% 200%,400% 400%;background-position:50% 50%,0% 0%;transition:opacity .2s ease,background-position .1s ease;animation:holo-shine 4s infinite linear}.card-container:hover .holo-overlay{opacity:.3;animation:holo-shine 2s infinite linear}@keyframes holo-shine{0%{background-position:50% 50%,0% 0%}to{background-position:50% 50%,200% 200%}}.layer-frame{position:absolute;top:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none}.card-title{position:absolute;bottom:50px;width:100%;z-index:4;padding:0 20px}.card-title h2{font-size:1.5rem;text-shadow:2px 2px 8px rgba(0,0,0,.9),0 0 10px rgba(255,255,255,.3);margin-bottom:5px;letter-spacing:1px}.rarity{display:inline-block;background:linear-gradient(135deg,gold,#ff8c00);padding:4px 12px;border-radius:5px;font-size:.7rem;font-weight:700;letter-spacing:2px;color:#000;box-shadow:0 2px 10px #ffd70080}.card-content{position:relative;z-index:5;padding:40px 25px;text-align:left;width:100%}.card-content h3{font-size:1.8rem;margin-bottom:1.5rem;text-align:center;text-transform:uppercase;letter-spacing:2px;text-shadow:2px 2px 8px rgba(0,0,0,.9)}.stats-list{list-style:none;margin-bottom:2rem;background:#0000004d;padding:15px;border-radius:10px;border:1px solid rgba(255,255,255,.1)}.stats-list li{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem}.stats-list li:last-child{border-bottom:none}.stat-key{font-weight:700;text-transform:uppercase;font-size:.85rem;letter-spacing:1px}.stat-value{color:#fff;font-weight:400}.lore{font-style:italic;color:#ccc;line-height:1.6;font-size:.9rem;text-align:center;padding:15px;background:#0000004d;border-radius:10px;border-left:3px solid rgba(255,255,255,.3)}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.card-container:nth-child(2){animation-delay:.7s}.card-container:nth-child(3){animation-delay:1.4s}.card-container:nth-child(4){animation-delay:2.1s}.card-container:nth-child(5){animation-delay:2.8s}.card-container:nth-child(6){animation-delay:3.5s}.card-container:nth-child(7){animation-delay:4.2s}.card-container:nth-child(8){animation-delay:4.9s}.card-container:nth-child(9){animation-delay:5.6s}.card-container:hover{animation:none}.card-container:hover .card-front{box-shadow:0 8px 40px #00d4ff99,0 0 30px #bb86fc66}@media(max-width:768px){.card-container{width:280px;height:420px}.card-content{padding:30px 20px}.card-content h3{font-size:1.5rem;margin-bottom:1rem}.stats-list{padding:12px;margin-bottom:1.5rem}.stats-list li{font-size:.85rem;padding:6px 0}.stat-key{font-size:.75rem}.lore{font-size:.8rem;padding:12px;line-height:1.5}}@media(max-width:480px){.card-container{width:240px;height:360px}.card-content{padding:20px 15px}.card-content h3{font-size:1.2rem;margin-bottom:.8rem;letter-spacing:1px}.stats-list{padding:10px;margin-bottom:1rem}.stats-list li{font-size:.75rem;padding:5px 0}.stat-key{font-size:.7rem;letter-spacing:.5px}.lore{font-size:.7rem;padding:10px;line-height:1.4}}*{margin:0;padding:0;box-sizing:border-box}body{background:linear-gradient(135deg,#0a0a0a,#1a1a1a,#0a0a0a);font-family:Courier New,Courier,monospace;color:#fff;min-height:100vh;padding:20px}.app-header{text-align:center;margin-bottom:3rem}.app-header h1{font-size:3rem;background:linear-gradient(135deg,#00d4ff,#bb86fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem;text-shadow:0 0 30px rgba(0,212,255,.3)}.app-header p{color:#888;font-size:1rem;letter-spacing:2px}.app-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:3rem;max-width:1400px;margin:0 auto;padding:2rem}.justification-section{color:#fff;max-width:900px;margin:6rem auto 2rem;padding:3rem;background:linear-gradient(135deg,#1a1a1a,#2d2d2d);border-radius:15px;box-shadow:0 10px 40px #00000080;border:2px solid #00d4ff}.justification-section h2{font-size:2rem;border-bottom:3px solid #00d4ff;padding-bottom:15px;margin-bottom:2rem;text-align:center}.justification-grid{display:grid;gap:2.5rem;margin-top:2rem}.justification-grid article{background:#0000004d;padding:2rem;border-radius:10px;border-left:4px solid #00d4ff}.justification-grid h3{margin-bottom:1rem;font-size:1.4rem}.justification-grid p{line-height:1.8;color:#ddd;font-size:1rem}.justification-grid em{color:#00d4ff;font-style:normal;font-weight:700}.justification-grid code{background:#00000080;padding:2px 6px;border-radius:3px;color:#bb86fc;font-family:Courier New,monospace;font-size:.9em}@media(max-width:768px){.app-container{grid-template-columns:1fr;gap:2rem}.app-header h1{font-size:2rem}}