:root{
--bg:#04012b;
--card:#03050a;
--text:#e9f4ff;
--cyan:#00fff9;
--border:rgba(255,255,255,.1);
}

/* BASE */
body{
margin:0;
font-family:Montserrat,sans-serif;
background:var(--bg);
color:var(--text);
}

/* =========================
   HEADER (BLUEPRINT FIX)
========================= */

.stp-header{
position:fixed;
top:0;
left:0;
width:100%;
height:70px;
background:#000;
border-bottom:1px solid var(--border);
z-index:1000;
}

.stp-header-inner{
max-width:1100px;
margin:auto;
height:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 16px;
}

.stp-brand{
font-family:Orbitron;
color:var(--cyan);
font-size:16px;
letter-spacing:1px;
}

/* RIGHT-ALIGNED MENU */
.stp-hamburger{
position:relative;
}

.stp-menu-icon{
font-size:22px;
cursor:pointer;
color:var(--cyan);
}

#stp-menu-toggle{display:none;}

.stp-menu{
position:absolute;
top:50px;
right:0;
background:#000;
border:1px solid var(--border);
display:none;
flex-direction:column;
min-width:200px;
}

#stp-menu-toggle:checked + .stp-menu-icon + .stp-menu{
display:flex;
}

.stp-menu a{
padding:10px;
text-decoration:none;
color:var(--text);
border-bottom:1px solid var(--border);
}

/* =========================
   MAIN LAYOUT
========================= */

.stp-main{
padding-top:90px;
display:flex;
justify-content:center;
}

.stp-container{
max-width:500px;
width:100%;
}

/* =========================
   PUZZLE CARD (FRAME)
========================= */

.puzzle-card{
background:linear-gradient(180deg, rgba(0,0,0,.85), rgba(3,5,10,.95));
border:1px solid var(--border);
padding:22px;
border-radius:14px;

box-shadow:
0 0 30px rgba(0,195,255,.55),
0 0 60px rgba(0,195,255,.38),
inset 0 0 18px rgba(0,255,255,.06);

text-align:center;
backdrop-filter:blur(6px);
}

/* =========================
   GRID (TIGHTENED)
========================= */

.grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px; /* reduced from 8px */
margin:20px auto;
}

/* =========================
   TILES
========================= */

h1{
margin:0 0 14px 0;
font-size:32px;
letter-spacing:1px;
font-family:Orbitron;

text-shadow:
0 0 8px rgba(0,255,255,.7),
0 0 18px rgba(0,255,255,.35);
}


.tile{
height:70px;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
font-family:Orbitron;

background:linear-gradient(180deg,#02040a,#050816);
border:1px solid rgba(0,195,255,.45);
cursor:pointer;

box-shadow:
0 0 16px rgba(0,195,255,.55),
inset 0 0 6px rgba(0,195,255,.25);

transition:.15s;
transition:
transform 0.12s ease,
box-shadow 0.15s,
background 0.15s;
}

.tile:hover{
transform:scale(1.05);
box-shadow:
0 0 14px rgba(0,255,255,.8),
0 0 22px rgba(0,255,255,.3);
}

.tile.valid{
border-color:#00c3ff;
box-shadow:
0 0 16px rgba(0,195,255,.9),
0 0 28px rgba(0,195,255,.3);
}


/* EMPTY TILE GLOW */

.empty{
background:rgba(0,255,255,0.06);

box-shadow:
0 0 18px rgba(0,255,255,.9),
inset 0 0 14px rgba(0,255,255,.35);

border:1px dashed rgba(0,255,255,.6);

animation:emptyPulse 3.6s infinite;
}

@keyframes emptyPulse{
0%{ box-shadow:0 0 10px rgba(0,255,255,.5);}
50%{ box-shadow:0 0 22px rgba(0,255,255,1);}
100%{ box-shadow:0 0 10px rgba(0,255,255,.5);}
}

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;

background:
radial-gradient(circle at 30% 20%, rgba(0,255,255,.1), transparent 40%),
radial-gradient(circle at 70% 80%, rgba(0,196,255,.1), transparent 40%);

z-index:-1;
}

/* =========================
   CONTROLS
========================= */

.controls{
display:flex;
justify-content:center;
gap:10px;
margin-top:10px;
}

button{
padding:10px 18px;
background:linear-gradient(90deg, #00fff9, #00baff);
border:none;
cursor:pointer;
font-family:Orbitron;
color:#000;
font-size:13px;

box-shadow:0 0 12px rgba(0,255,255,.6);
transition:.2s;
}

button:hover{
transform:translateY(-2px);
box-shadow:
0 0 18px rgba(0,255,255,.9),
0 0 30px rgba(0,255,255,.4);
}

/* =========================
   INFO
========================= */

.info{
margin-top:12px;
display:flex;
justify-content:space-between;
padding:0 10px;
font-size:14px;
}

/* =========================
   FOOTER
========================= */

.stp-footer{
margin-top:40px;
padding:20px;
text-align:center;
border-top:1px solid var(--border);
font-size:12px;
}