@import "https://fonts.googleapis.com/css2?family=Syncopate:wght@400;700&family=Outfit:wght@300;400;700;900&display=swap";:root{--bg-color:#020202;--text-color:#fff;--accent-color:#a29bfe;--glass-bg:#ffffff08;--glass-border:#ffffff14;--transition-speed:.5s}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-color);color:var(--text-color);perspective:1000px;cursor:grab;width:100vw;height:100dvh;font-family:Outfit,sans-serif;overflow:hidden}body.grabbing{cursor:grabbing}#app{width:100%;height:100%;position:relative;overflow:hidden}canvas{z-index:1;pointer-events:none;filter:saturate(1.2)contrast(1.1);width:100%;height:100%;position:absolute;top:0;left:0}.ui-layer{z-index:100;width:100%;height:100%;padding:env(safe-area-inset-top,2rem) 2rem env(safe-area-inset-bottom,2rem) 2rem;pointer-events:none;flex-direction:column;justify-content:flex-end;display:flex;position:absolute;top:0;left:0}header{pointer-events:auto;z-index:101;position:absolute;top:2rem;left:2rem}h1{text-transform:uppercase;letter-spacing:.4rem;color:var(--accent-color);text-shadow:0 0 20px rgba(var(--accent-color-rgb), .4);margin-bottom:.3rem;font-family:Syncopate,sans-serif;font-size:1.4rem;font-weight:900}header p{text-transform:uppercase;letter-spacing:.2rem;opacity:.5;font-size:.7rem}.selector-bar{pointer-events:auto;background:linear-gradient(#0000,#000000e6);border-radius:2rem 2rem 0 0;justify-content:center;gap:1rem;width:100%;padding:1.5rem;display:flex}.character-card{background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(15px);text-align:center;cursor:pointer;border-radius:12px;min-width:140px;padding:1rem 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1)}.character-card h3{letter-spacing:.15rem;color:#fff;margin-bottom:.3rem;font-family:Syncopate,sans-serif;font-size:.7rem;font-weight:700}.character-card p{opacity:.4;text-transform:uppercase;letter-spacing:.05rem;font-size:.55rem}.character-card:hover{border-color:var(--accent-color);box-shadow:0 10px 25px #00000080, 0 0 15px rgba(var(--accent-color-rgb), .3);background:#ffffff14;transform:translateY(-8px)}.character-card.active{border-color:var(--accent-color);box-shadow:0 15px 35px #0009, 0 0 25px rgba(var(--accent-color-rgb), .5);background:#ffffff1f;transform:translateY(-12px)scale(1.05)}.domain-info-popup{pointer-events:none;opacity:0;background:var(--glass-bg);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:1.5rem;max-width:320px;padding:2rem;transition:all .5s cubic-bezier(.23,1,.32,1);position:absolute;top:50%;left:2.5rem;transform:translateY(-50%)}.domain-info-popup.visible{opacity:1;transform:translateY(-50%)translate(20px)}.info-title{color:var(--accent-color);margin-bottom:.8rem;font-family:Syncopate,sans-serif;font-size:1rem;font-weight:700}.info-text{opacity:.7;font-size:.85rem;font-weight:300;line-height:1.6}body[data-theme=gojo]{--accent-color:#a29bfe;--accent-color-rgb:162, 155, 254}body[data-theme=sukuna]{--accent-color:#ff7675;--accent-color-rgb:255, 118, 117}body[data-theme=megumi]{--accent-color:#00cec9;--accent-color-rgb:0, 206, 201}body[data-theme=mahito]{--accent-color:#dfe6e9;--accent-color-rgb:223, 230, 233}body[data-theme=jogo]{--accent-color:#fab1a0;--accent-color-rgb:250, 177, 160}body[data-theme=hakari]{--accent-color:#fdcb6e;--accent-color-rgb:253, 203, 110}body[data-theme=none]{--accent-color:#fff;--accent-color-rgb:255, 255, 255}.shake{animation:.8s cubic-bezier(.36,.07,.19,.97) both shake}@keyframes shake{10%,90%{transform:translate(-1px)}20%,80%{transform:translate(2px)}30%,50%,70%{transform:translate(-4px)}40%,60%{transform:translate(4px)}}::-webkit-scrollbar{display:none}@media (width<=768px){.ui-layer{padding:1.5rem}header{text-align:left;width:calc(100% - 3rem);top:1.5rem;left:1.5rem}h1{letter-spacing:.25rem;font-size:1.1rem}header p{font-size:.6rem}.selector-bar{-webkit-overflow-scrolling:touch;border-radius:1.5rem 1.5rem 0 0;justify-content:flex-start;gap:.8rem;padding:1.2rem;overflow-x:auto;-webkit-mask-image:linear-gradient(90deg,#000 85%,#0000 100%);mask-image:linear-gradient(90deg,#000 85%,#0000 100%)}.character-card{min-width:120px;padding:.8rem 1rem}.character-card h3{font-size:.6rem}.domain-info-popup{border-radius:1rem;max-width:none;padding:1.5rem;top:6rem;left:1.5rem;right:1.5rem;transform:translateY(0)}.domain-info-popup.visible{transform:translateY(10px)}.info-title{font-size:.9rem}.info-text{font-size:.75rem}}