:root{ --bg:#000; --fg:#fff }
html,body{height:100%;margin:0;color:var(--fg);font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
body{background-color:var(--bg);position:relative}
/* Background image layer (50% opacity) */
body::before{content:"";position:fixed;inset:0;background-image:url('/assets/realm-bg.png');background-size:cover;background-position:center center;background-repeat:no-repeat;opacity:0.5;z-index:-1;pointer-events:none}
/* Instagram button (top-right) */
.social-ig{position:fixed;top:1rem;right:1rem;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;z-index:40;background:transparent;border-radius:8px;transition:transform .12s ease,opacity .12s ease}
.social-ig:focus{outline:2px solid #fff;outline-offset:3px}
.social-ig:hover{transform:scale(1.05)}
.social-ig svg{width:100%;height:100%;display:block}
/* Top center nav buttons (glass aesthetic) */
.top-nav{position:fixed;top:1rem;left:50%;transform:translateX(-50%);display:flex;gap:0.8rem;z-index:46;pointer-events:auto}
.glass-btn{display:inline-flex;align-items:center;justify-content:center;padding:0.6rem 0.9rem;border-radius:10px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--fg);backdrop-filter:blur(10px) saturate(120%);-webkit-backdrop-filter:blur(10px) saturate(120%);font-weight:600;text-decoration:none;font-size:0.98rem;transition:transform .14s ease,background .14s ease}
.glass-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,0.06)}
.wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem;text-align:center}
/* PJAX container and page animation helpers */
#pjax-container{position:relative;overflow:hidden;min-height:100vh}
.pjax-page{position:absolute;inset:0;will-change:transform,opacity}
/* Heading */
h1{font-size:38px;margin:0;letter-spacing:-0.02em}
h1{color:var(--fg);font-weight:800;-webkit-text-stroke:2px #000;text-shadow:2px 0 0 #000,-2px 0 0 #000,0 2px 0 #000,0 -2px 0 #000,1px 1px 0 #000,-1px -1px 0 #000}
p{margin-top:1.2rem;opacity:0.95;font-size:1.05rem}
/* Contact icon variant */
.contact-ig{display:inline-flex;width:84px;height:84px;border-radius:12px;align-items:center;justify-content:center;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.06);margin:0 auto}
/* Footer text */
.site-footer{position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);font-size:0.72rem;color:rgba(255,255,255,0.45);letter-spacing:0.02em;z-index:30;pointer-events:none}
/* Desktop: hide mobile elements */
.menu-toggle,
.mobile-drawer,
.glass-overlay,
.mobile-nav,
.mobile-link{
display:none !important;
}
body.menu-open{overflow:hidden}
@media (prefers-reduced-motion: no-preference){h1{transform:translateY(0);transition:transform .8s cubic-bezier(.2,.8,.2,1)}.wrap.loaded h1{transform:translateY(-4px)}}
/* Slight layout tweak for very small screens */
@media (max-width:360px){
.glass-btn{font-size:0.85rem;padding:0.36rem 0.5rem}
h1{font-size:26px}
}
/* ===== MOBILE STYLES (max-width: 600px) ===== */
@media (max-width:600px){
/* Hide desktop nav, show mobile elements */
.top-nav{display:none !important}
.social-ig{display:none !important}
/* Page adjustments */
.wrap{padding:1.2rem}
h1{font-size:28px}
.contact-ig{width:64px;height:64px}
/* Scroll lock when menu open */
body.menu-open{position:fixed;width:100%;inset:0}
/* Arrow trigger button - centered at top, same style as glass-btn */
.menu-toggle{
display:inline-flex !important;
position:fixed !important;
top:0.9rem !important;
left:50% !important;
transform:translateX(-50%) !important;
z-index:100 !important;
width:56px;
height:40px;
border-radius:10px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
align-items:center;
justify-content:center;
cursor:pointer;
}
/* Chevron arrow */
.menu-toggle .chevron{
display:block !important;
position:relative;
z-index:2;
color:rgba(255,255,255,0.9);
font-weight:700;
font-size:18px;
line-height:1;
transform:rotate(90deg);
transition:transform 0.3s cubic-bezier(.2,.8,.2,1);
}
/* Arrow flips when open */
.menu-toggle.open .chevron{
transform:rotate(-90deg);
}
/* Full-screen drawer (slides from top) - HIDDEN by default */
.mobile-drawer{
display:block !important;
position:fixed !important;
top:0;
left:0;
right:0;
bottom:0;
z-index:90 !important;
pointer-events:none;
opacity:0;
visibility:hidden;
transform:translateY(-100%);
transition:transform 0.45s cubic-bezier(.22,.9,.3,1), opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-drawer.open{
pointer-events:auto;
opacity:1;
visibility:visible;
transform:translateY(0);
}
/* Glass background overlay - subtle, lets background show through */
.glass-overlay{
display:block !important;
position:absolute;
inset:0;
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
}
/* Nav container - centered with reasonable spacing */
.mobile-nav{
display:flex !important;
position:relative;
height:100%;
padding:4.5rem 1rem 1.5rem;
flex-direction:column;
justify-content:center;
align-items:center;
gap:0.6rem;
}
/* Glass link buttons - same size and style as original glass-btn */
.mobile-link{
display:inline-flex !important;
align-items:center;
justify-content:center;
text-decoration:none;
color:var(--fg);
font-size:0.98rem;
font-weight:600;
padding:0.6rem 0.9rem;
border-radius:10px;
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px) saturate(120%);
-webkit-backdrop-filter:blur(10px) saturate(120%);
transition:transform 0.14s ease, background 0.14s ease;
}
.mobile-link:active{
transform:scale(0.98);
background:rgba(255,255,255,0.06);
}
}