*{margin:0;padding:0;box-sizing:border-box}
html,body{
    width:100%;height:100%;
    overflow:hidden;
    background:#020105;
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    color:#e0e8f0;
    cursor:none;
}

#particleCanvas{
    position:fixed;inset:0;z-index:0;
    pointer-events:none;
}

.spotlight-mask{
    position:fixed;inset:0;z-index:50;
    pointer-events:none;
    background:radial-gradient(
        circle 280px at var(--x,50%) var(--y,50%),
        rgba(2,1,5,0) 0%,
        rgba(2,1,5,0.25) 35%,
        rgba(2,1,5,0.75) 65%,
        rgba(2,1,5,0.97) 100%
    );
    transition:background 0.08s ease-out;
}

.spotlight-mask.focused{
    background:radial-gradient(
        circle 600px at var(--x,50%) var(--y,50%),
        rgba(2,1,5,0) 0%,
        rgba(2,1,5,0.6) 50%,
        rgba(2,1,5,0.95) 100%
    );
}

.cursor-glow{
    position:fixed;z-index:200;
    width:20px;height:20px;
    border-radius:50%;
    background:rgba(140,220,255,0.15);
    box-shadow:0 0 30px rgba(140,220,255,0.25),0 0 60px rgba(140,220,255,0.1);
    transform:translate(-50%,-50%);
    pointer-events:none;
    transition:width 0.3s,height 0.3s,box-shadow 0.3s;
}
.cursor-glow.active{
    width:40px;height:40px;
    box-shadow:0 0 50px rgba(140,220,255,0.4),0 0 100px rgba(140,220,255,0.15);
}

.content{
    position:relative;z-index:10;
    width:100%;height:100%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    padding:60px 40px;
}

.header{
    text-align:center;margin-bottom:60px;
    opacity:0;animation:fadeIn 1.5s ease-out 0.3s forwards;
}
.header h1{
    font-size:clamp(2.5rem,6vw,4.5rem);
    font-weight:200;letter-spacing:0.4em;
    background:linear-gradient(180deg,#ffffff 0%,#7ab8e0 50%,#3a7ab8 100%);
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.header p{
    font-size:clamp(0.65rem,1.3vw,0.85rem);
    letter-spacing:0.6em;color:rgba(120,180,220,0.4);
    margin-top:12px;
}

.realm-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:24px;
    max-width:900px;width:100%;
}

.realm-card{
    position:relative;
    padding:36px 32px;
    border-radius:16px;
    border:1px solid rgba(100,180,255,0.06);
    background:rgba(8,14,28,0.35);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    overflow:hidden;
    transition:all 0.5s cubic-bezier(0.4,0,0.2,1);
    opacity:0.25;
    transform:scale(0.96);
}
.realm-card::before{
    content:'';position:absolute;inset:0;
    border-radius:16px;
    padding:1px;
    background:linear-gradient(135deg,rgba(100,200,255,0.15),transparent 50%,rgba(180,120,255,0.08));
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0.3;transition:opacity 0.5s;
}

.realm-card.illuminated{
    opacity:1;
    transform:scale(1);
    border-color:rgba(100,200,255,0.18);
    background:rgba(12,22,45,0.55);
}
.realm-card.illuminated::before{opacity:1;}

.realm-card .icon{
    font-size:1.8rem;margin-bottom:16px;
    opacity:0.5;transition:opacity 0.5s;
    display:inline-block;
}
.realm-card.illuminated .icon{opacity:1;}

.realm-card h3{
    font-size:1.15rem;font-weight:400;
    letter-spacing:0.15em;
    margin-bottom:10px;
    color:rgba(200,220,240,0.6);
    transition:color 0.5s;
}
.realm-card.illuminated h3{color:rgba(220,235,250,0.95);}

.realm-card p.desc{
    font-size:0.85rem;line-height:1.8;
    color:rgba(160,190,220,0.35);
    transition:color 0.5s;
}
.realm-card.illuminated p.desc{color:rgba(160,190,220,0.7);}

.realm-card .hint{
    margin-top:16px;font-size:0.7rem;
    letter-spacing:0.2em;color:rgba(100,180,255,0.25);
    opacity:0;transition:opacity 0.5s;
}
.realm-card.illuminated .hint{opacity:1;}

.realm-card.focused{
    position:fixed;z-index:150;
    top:50%;left:50%;
    transform:translate(-50%,-50%) scale(1.05);
    width:min(560px,90vw);
    opacity:1;
    background:rgba(12,24,50,0.85);
    border-color:rgba(100,200,255,0.3);
}
.realm-card.focused .detail{display:block;}
.realm-card .detail{
    display:none;margin-top:20px;
    padding-top:20px;
    border-top:1px solid rgba(100,200,255,0.1);
}
.realm-card .detail p{
    font-size:0.82rem;line-height:2;
    color:rgba(170,200,230,0.65);
}

.realm-grid.has-focused .realm-card:not(.focused){
    opacity:0;pointer-events:none;
    transition:opacity 0.4s;
}

.footer-hint{
    position:fixed;bottom:30px;left:50%;
    transform:translateX(-50%);z-index:60;
    font-size:0.65rem;letter-spacing:0.25em;
    color:rgba(120,180,220,0.2);
    pointer-events:none;
    transition:opacity 0.5s;
}
.footer-hint.hidden{opacity:0;}

.back-btn{
    position:fixed;top:30px;left:30px;z-index:200;
    padding:8px 20px;border-radius:20px;
    border:1px solid rgba(100,200,255,0.2);
    background:rgba(8,14,28,0.6);
    color:rgba(140,200,240,0.7);
    font-size:0.75rem;letter-spacing:0.15em;
    cursor:none;opacity:0;pointer-events:none;
    transition:all 0.4s;
}
.back-btn.visible{opacity:1;pointer-events:auto;}
.back-btn:hover{
    border-color:rgba(100,200,255,0.4);
    background:rgba(12,24,50,0.8);
    color:rgba(180,225,255,0.9);
}

@keyframes fadeIn{to{opacity:1}}

@media(max-width:640px){
    .realm-grid{grid-template-columns:1fr;gap:16px;}
    .content{padding:40px 20px;}
    .realm-card{padding:28px 24px;}
}